Jak określić selektor rodzeństwa w Less w skrócie?

Question

Mam następującą regułę: mniej

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

To działa dobrze, ale wygląda brzydko, bo jeśli mój menu-link klasa przebrać niż muszę wymienić go w dwóch miejscach.

Czy istnieje sposób na uproszczenie powyższej zasady?

Answer 1

LESS - Parent Selectors

Operator & oznacza selektory macierzystych zagnieżdżonej zasady i najczęściej używane podczas stosowania klasy modyfikowania lub pseudo-klasę istniejącego przełącznika.

Od & reprezentuje rodzica, można po prostu użyć & + &:

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

..which kompiluje do:

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

---

Na marginesie, & odnosi się do cały selektor nadrzędny. Tak więc, jeśli były, aby użyć następujących:

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

byłoby ..To skompilować do niepożądanego wyniku:

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

Dlatego trzeba by zachować swoje selektorów prostych i używać

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