MENOS clases de anidamiento CSS

Question

MENOS clases de anidamiento CSS

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 anidamiento 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 que el .g.posted funcione. 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. Alguna idea?

92

css less nested

Author: John Slegers, 2011-02-25

Source

3 answers

.g {
    &.posted {
    }
}

Debe agregar "&" antes .publicado

112

Author: grobitto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-30 12:40:24

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

2

Author: Nesha Zoric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-21 08:20:42

score 177 · Accepted Answer

[RESPUESTA EDITADA]

Como he sido votada abajo sin ningún comentario o justificación, me siento obligado a reaccionar a lo que sienten como podrían ser la causa de la downvote.

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

.class1 {
    &.class2 {}
}

Y el CSS generado se verá así:

.class.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. .class2 solo se aplicará si es hijo de un nodo con la clase class1.

He sido confundido con esto también y mi conclusión es que LESS necesita una palabra clave this:).