2011-02-25 15 views
86

Estoy usando LESS para mejorar mi CSS y estoy tratando de anidar una clase dentro de una clase. Hay una jerarquía bastante complicada, pero por alguna razón mi anidación no funciona. tengo esto:MENOS clases de anidamiento CSS

.g { 
    float: left; 
    color: #323a13; 
    .border(1px,#afc945); 
    .gradient(#afc945, #c8da64); 
    .common; 
    span { 
     .my-span; 
     .border-dashed(1px,rgba(255,255,255,0.3)); 
    } 
    .posted { 
     .my-posted; 
     span { 
      border: none; 
     } 
    } 
} 

que no puede obtener la .g.posted para trabajar. solo muestra el bit .g. si hago esto está bien:

.g { 
    float: left; 
    color: #323a13; 
    .border(1px,#afc945); 
    .gradient(#afc945, #c8da64); 
    .common; 
    span { 
     .my-span; 
     .border-dashed(1px,rgba(255,255,255,0.3)); 
    } 
} 

.g.posted { 
     .my-posted; 
     span { 
      border: none; 
     } 
    } 

me gustaría anidar el .posted en .g sin embargo. ¿Algunas ideas?

Respuesta

170

[RESPUESTA EDITADO]

Como he estado downvoted sin ningún comentario o justificación, me siento obligado a reaccionar a lo que me siento como podría ser la causa de la downvote.

El carácter & tiene la función de una palabra clave this, de hecho (algo que no sabía al momento de escribir la respuesta). Es posible escribir:

.class1 { 
    &.class2 {} 
} 

y el CSS generado tendrá el siguiente aspecto:

.class.class2 {} 

Para el registro, @grobitto fue el primero en publicar este pedazo de información.

[Respuesta original]

MENOS no funciona de esta manera.

.class1.class2 {} - define dos clases en el mismo nodo DOM, pero

.class1 { 
    .class2 {} 
} 

define nodos anidados. .class2 solo se aplicará si es hijo de un nodo con la clase class1.

Me han confundido con esto también y mi conclusión es que MENOS necesita una palabra clave this :).

+5

'sass' tiene esa funcionalidad incorporada con el operador &. – sevenseacat

+0

awww, no. Pensé que MENOS era increíble hasta ahora ... gracias –

+2

MENOS aún es increíble, especialmente el preprocesador PHP LESS, con su sintaxis modificada y más flexible. Pero hasta que haya algún tipo de sintaxis comúnmente aceptada, tales problemas surgirán de vez en cuando. En mi opinión, este es MENOS inconveniente. – mingos

108
.g { 
    &.posted { 
    } 
} 

se debe añadir "&" antes .posted

1

Si el símbolo de unión se encuentra justo al lado del elemento secundario en la anidación, que se compila en un selector de clase doble. Si hay espacio entre & y selector, se compilará en el selector de elementos secundarios. Obtenga más información acerca de anidar en Menos here.