LESS CSS的命名規則上懸停

Question

子選擇在更短的，您可以按以下引用子選擇：

<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; 
}