MENOS clases de anidamiento CSS

101

Estoy usando MENOS 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 hacer .g.postedque funcione. solo muestra el .gbit. 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 la .postedde .gembargo. ¿Algunas ideas?

css nested less novato_86
fuente

Respuestas:

192

El &personaje tiene la función de thispalabra clave, de hecho (algo que no sabía en el momento de escribir la respuesta). Es posible escribir:

.class1 {
    &.class2 {}
}

y el CSS que se generará se verá así:

.class1.class2 {}

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

[RESPUESTA ORIGINAL]

LESS no funciona de esta manera.

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

.class1 {
    .class2 {}
}

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

También me han confundido con esto y mi conclusión es que MENOS necesita una thispalabra clave :).

mingos
fuente
5
sasstiene esa funcionalidad incorporada con el operador &.
sevenseacat
2
LESS sigue siendo impresionante, 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, estos problemas surgirán de vez en cuando. En mi opinión, este es el único inconveniente de MENOS.
mingos
1
@ newbie_86 No puede mezclar la sintaxis sass y css nativa. Por lo tanto, migrar a Sass requiere una reescritura completa de sus estilos, mientras que en menos ya puede compilar sus estilos existentes y comenzar a reescribirlos pieza por pieza.
topless
1
Tenía curiosidad por saber por qué la segunda respuesta tiene más mejoras que esta, a pesar de que es la misma y tiene una fecha posterior. Luego vi la última oración y subí ambas respuestas
llamerr
@topless, ¿qué quieres decir con "No puedes mezclar sass y sintaxis CSS nativa"? Lo he estado haciendo durante años. Funciona muy bien para mi.
Shanimal
115 
.g {
    &.posted {
    }
}

debe agregar "&" antes de .posted

grobitto
fuente
2

Si el ampersand se encuentra justo al lado del elemento secundario en el anidamiento, se compila en un selector de clase doble. Si hay espacio entre & y el selector, se compilará en el selector secundario. Lea más sobre anidar en Less aquí .

Nesha Zoric
fuente