Come specificare il selettore di pari livello in Meno in breve?

Question

Ho il seguente meno regola:

.menu-link { 
    & + .menu-link { 
     border-left: 1px solid #000; 
    } 
} 

Funziona bene, ma sembra brutto, perché se la mia classe menu-link cambiarsi di quanto ho bisogno di sostituirlo due posti.

C'è un modo per semplificare la regola sopra?

Answer 1

LESS - Parent Selectors

L'operatore & rappresenta i selettori controllanti di una regola nidificata e è più comunemente usato quando si applica una classe modificante o pseudo-classe per un selettore esistente.

Dal & rappresenta il genitore, si potrebbe semplicemente usare & + &:

.menu-link { 
    & + & { 
     border-left: 1px solid #000; 
    } 
} 

..che compila a:

.menu-link + .menu-link { 
    border-left: 1px solid #000; 
} 

---

Come nota a margine, & si riferisce alla intero selettore genitore. Quindi, se si dovesse utilizzare il seguente:

.parent { 
    .menu-link { 
    & + & { 
     border-left: 1px solid #000; 
    } 
    } 
} 

..è sarebbe compilare al risultato indesiderato di:

.parent .menu-link + .parent .menu-link { 
    border-left: 1px solid #000; 
} 

Pertanto si avrebbe bisogno di mantenere i selettori semplici e utilizzare

.menu-link { 
    & + & { 
     border-left: 1px solid #000; 
    } 
}