MENOS classes de aninhamento CSS

101

Estou usando o LESS para melhorar meu CSS e tentando aninhar uma classe dentro de outra. Há uma hierarquia bastante complicada, mas por algum motivo meu aninhamento não funciona. Eu tenho isto:

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

Eu não consigo fazer o .g.postedtrabalho. apenas mostra a parte .g. Se eu fizer isso, tudo bem:

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

Eu gostaria de ninho .postedno .gentanto. Alguma ideia?

css nested less

— newbie_86
fonte

Respostas:

192

O &personagem tem a função de uma thispalavra - chave, na verdade (coisa que eu não sabia no momento em que escrevia a resposta). É possível escrever:

.class1 {
    &.class2 {}
}

e o CSS que será gerado terá a seguinte aparência:

.class1.class2 {}

Só para constar, @grobitto foi o primeiro a postar esta informação.

[RESPOSTA ORIGINAL]

LESS não funciona assim.

.class1.class2 {} - define duas classes no mesmo nó DOM, mas

.class1 {
    .class2 {}
}

define nós aninhados. .class2só será aplicado se for filho de um nó com a classe class1.

Também fiquei confuso com isso e minha conclusão é que LESS precisa de uma thispalavra - chave :).

— mingos
fonte

sasstem essa funcionalidade integrada com o operador &.

— sevenseacat

LESS ainda é incrível, especialmente o pré-processador PHP LESS, com sua sintaxe modificada e mais flexível. Mas até que haja algum tipo de sintaxe comumente aceita, esses problemas surgirão de vez em quando. Em minha opinião, esta é a única desvantagem de MENOS.

— mingos de

@ newbie_86 Você não pode misturar sintaxe sass e css nativa. Portanto, migrar para o Sass requer uma reescrita completa de seus estilos, enquanto em menos você já pode compilar seus estilos existentes e começar a reescrevê-los peça por peça.

— topless

Fiquei curioso porque a segunda resposta tem mais ups do que esta, apesar de ser a mesma e ter data posterior. Então eu vi a última frase e aumentei ambas as respostas

— llamerr

@topless, o que você quer dizer com "Você não pode misturar sintaxe sass e css nativa" Tenho feito isso há anos. Funciona muito bem para mim.

— Shanimal

115

.g {
    &.posted {
    }
}

você deve adicionar "&" antes de .posted

— Grobitto
fonte

Se o e comercial estiver localizado próximo ao elemento filho no aninhamento, ele será compilado em um seletor de classe dupla. Se houver espaço entre & e seletor, ele será compilado no seletor filho. Leia mais sobre aninhamento em Less aqui .

— Nesha Zoric
fonte