LESS CSSの命名規則 - LESSでホバー

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