MENO classi di annidamento CSS

101

Sto usando MENO per migliorare il mio CSS e sto cercando di annidare una classe all'interno di una classe. C'è una gerarchia abbastanza complicata ma per qualche motivo la mia nidificazione non funziona. Ho questo:

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

Non riesco a farlo .g.postedfunzionare. mostra solo il .gbit. Se lo faccio va bene:

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

Mi piacerebbe nido .postedin .gperò. Qualche idea?

css nested less

— newbie_86
fonte

Risposte:

192

Il &personaggio ha la funzione di una thisparola chiave, in realtà (cosa che non sapevo al momento di scrivere la risposta). È possibile scrivere:

.class1 {
    &.class2 {}
}

e il CSS che verrà generato sarà simile a questo:

.class1.class2 {}

Per la cronaca, @grobitto è stato il primo a postare questa informazione.

[RISPOSTA ORIGINALE]

LESS non funziona in questo modo.

.class1.class2 {} - definisce due classi sullo stesso nodo DOM, ma

.class1 {
    .class2 {}
}

definisce i nodi annidati. .class2verrà applicato solo se è figlio di un nodo con la classe class1.

Anch'io sono stato confuso con questo e la mia conclusione è che LESS necessita di una thisparola chiave :).

— Mingos
fonte

sassha quella funzionalità integrata con l'operatore &.

— sevenseacat

LESS è ancora fantastico, specialmente il preprocessore PHP LESS, con la sua sintassi modificata e più flessibile. Ma fino a quando non ci sarà una sorta di sintassi comunemente accettata, tali problemi sorgeranno di tanto in tanto. A mio avviso, questo è MENO l'unico inconveniente.

— mingos

@ newbie_86 Non è possibile combinare la sintassi sass e css nativa. Quindi la migrazione a Sass richiede una riscrittura completa dei tuoi stili, mentre in meno puoi già compilare i tuoi stili esistenti e iniziare a riscriverli pezzo per pezzo.

— topless

Ero curioso di sapere perché la seconda risposta avesse più aumenti di questa, nonostante fosse la stessa e avesse una data ultima. Poi ho visto l'ultima frase e ho alzato entrambe le risposte

— llamerr

@topless cosa intendi con "Non puoi mischiare sintassi sass e css nativa" Lo faccio da anni. Funziona alla grande per me.

— Shanimal

115

.g {
    &.posted {
    }
}

dovresti aggiungere "&" prima di .posted

— grobitto
fonte

Se la e commerciale si trova proprio accanto all'elemento figlio nella nidificazione, viene compilata in un selettore di doppia classe. Se c'è spazio tra & e selector, verrà compilato nel selettore figlio. Maggiori informazioni sull'annidamento in Less qui .

— Nesha Zoric
fonte