MENO: Estendi un selettore annidato precedentemente definito

Question

Ho cercato come un matto di ottenere la seguente istruzione LESS per funzionare, ma ora temo che non accadrà:/Quindi mi rivolgo ora a voi ragazzi in la fine per l'aiuto!

Ho la seguente dichiarazione:

.top{ 
    &-first{ 
     background:black; 
     &-item{ 
      color:white; 
     } 
    } 
    &-second{ 
     background:green; 
     &-item:extend(.top-first-item){} 
    } 
} 

speravo in più adeguati per svolgere il seguente output:

.top-first { 
    background: black; 
} 
.top-first-item, 
.top-second-item{ 
    color: white; 
} 
.top-second { 
    background: green; 
} 

Ma purtroppo non si compila questo, ma questo, invece:

.top-first { 
    background: black; 
} 
.top-first-item{ 
    color: white; 
} 
.top-second { 
    background: green; 
} 

Answer 1

MENO attualmente non supporta t estendere i selettori di "nome concatenato" (in pratica, .top &-first &-item viene interpretato come tre distinti elementi di selezione e non viene mai trovato da extend alla ricerca di un singolo selettore).

Una soluzione per il vostro caso particolare:

.top { 
    &-first { 
     background: black; 
    } 

    &-second { 
     background: green; 
    } 

    &-first, &-second { 
     &-item { 
      color: white; 
     } 
    } 
} 

Answer 2

Un'altra opzione è quella di rompere le designazioni in classi separate:

MENO

.top{ 
    &.first{ 
     background:black; 
     &.item{ 
      color:white; 
     } 
    } 
    &.second{ 
     background:green; 
     &.item:extend(.top.first.item){} 
    } 
} 

uscita CSS

.top.first { 
    background: black; 
} 
.top.first.item, 
.top.second.item { 
    color: white; 
} 
.top.second { 
    background: green; 
} 

Che naturalmente richiede un cambiamento nella vostra designazione html da class="top-first-item" a class="top first item".

Answer 3

Questo è ovviamente qualcosa che dovrebbe funzionare in MENO. Alcuni mesi fa ho messo un problema sul github di LESS.js riguardante esattamente questo.

Link to Github issue

Nel frattempo, mi consiglia di utilizzare sette fasi-max soluzione semplicemente mettendo le classi insieme in questo modo:

&-first, &-second {} 

Ma poi non puoi estratto il secondo out in un altro file .

Un'altra soluzione è quella di creare un file "extends.less", in cui è possibile avere piccoli snippet che si utilizzano da tempo.

Answer 4

Basta usare il suffisso 'all'. Esempio: &: estendere (.top-first-item all);