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