example - MENOS clases de anidamiento de CSS

css:: before selector

Question

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:

.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;
}
}
}

No puedo poner el .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;
}
}

Sin embargo, me gustaría anidar el .posted en .posted . ¿Algunas ideas?

Answer 1

Si el signo & se encuentra justo al lado del elemento secundario en la anidación, se compila en un selector de clase doble. Si hay espacio entre & y el selector, se compilará en el selector de elementos secundarios. Lea más sobre anidar en Less here .

Answer 2

[EDITED RESPUESTA]

Como me han votado negativamente sin ningún comentario o justificación, me siento obligado a reaccionar ante lo que creo que podría ser la causa del voto en contra.

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

.class1 {
&.class2 {}
}

y el CSS generado se verá así:

.class.class2 {}

Para el registro, @grobitto fue el primero en publicar esta información.

[RESPUESTA ORIGINAL]

MENOS no funciona de esta manera.

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

.class1 {
.class2 {}
}

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

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

Answer 3

.g {
&.posted {
}
}

debe agregar "&" antes de .posted