LESS CSS Namenskonvention - Child Selektoren auf schweben

Question

In weniger, können Sie ein Kind Selektor Referenz wie folgt:

<div class="button"> 
    <div class="button-text"> Text </div> 
</div> 

.button { 
    &-text { 
    color:red; 
    } 
} 

erhalten Sie folgende Ausgabe:

.button .button-text { color:red; } 

Das ist ordentlich und ideal, aber, Wenn Sie einen Hover verwenden, gibt es eine Möglichkeit, die gleiche/ähnliche Syntax für das Kindelement beizubehalten? Derzeit würde dies natürlich nicht funktionieren:

.button { 
    &:hover { 
    &-text { 
     color:red; 
    } 
    } 
} 

Das wird nicht funktionieren und wie erwartet, gibt etwas entlang der Linien von

.button:hover .hover-text { } 

Gibt es eine Möglichkeit, das erwartete Hover Ergebnis zu erhalten, ohne zu definieren der vollständige Klassenname, in diesem Fall ".button-text"?

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Da der Eltern-Selektor & alle übergeordneten Selektoren (nicht nur den nächsten Vorfahren) darstellt, enthält die Verschachtelung unter Hover immer den :hover Text.

Diese Regel:

.button { 
    &:hover &-text { 
    color:red; 
    } 
} 

das Ergebnis liefert (lessismore playgroud):

.button:hover .button-text { 
    color: red; 
}