Wie wird der Geschwisterselektor in Less kurz spezifiziert?

Question

Ich habe folgende weniger Regel:

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

Es funktioniert aber sieht hässlich aus, denn wenn meine menu-link Klasse erhalten geändert, als ich es zwei Plätze ersetzen muß.

Gibt es eine Möglichkeit, die obige Regel zu vereinfachen?

Answer 1

LESS - Parent Selectors

& Der Operator stellt die übergeordneten Selektoren einer verschachtelten Regel und wird am häufigsten verwendet, wenn eine modifizierende Klasse oder pseudo-Klasse zu einem existierenden Selektor angelegt wird.

Da & die Eltern darstellt, können Sie einfach & + & verwenden:

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

..welche zu kompiliert:

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

---

Als Randbemerkung, bezieht sich & auf die gesamter Elternselektor Wenn Sie also sind die folgend verwenden:

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

..es zu dem unerwünschten Ergebnis kompilieren würde:

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

Daher müssen Sie Ihre Wähler einfach zu halten und verwenden

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