LESS CSS Naming Convention - Дочерние селекторы на парении

Question

В LESS, вы можете ссылаться на селектор ребенка следующим образом:

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

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

Это Выведет:

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

Это аккуратный и идеально, однако, при использовании зависания существует ли способ поддерживать тот же/похожий синтаксис для дочернего элемента? В настоящее время, это не будет работать, естественно:

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

Это не будет работать, как и ожидалось, выводит что-то вдоль линий

.button:hover .hover-text { } 

Есть ли способ, чтобы получить ожидаемый результат парения без определения полное имя класса, в данном случае «.button-text»?

Любая помощь была бы принята с благодарностью.

Answer 1

Поскольку родительский селектор & представляет все родительские селекторы (не только ближайшие предки), вложенные под наведение, всегда будут содержать текст :hover.

Это правило:

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

Обеспечит результат (lessismore playgroud):

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