SCSSの兄弟姉妹を参考にするには？

Question

私は、次のHTML持っていると仮定すると、次のCSSで記述できる項目を、ホバリング時に私は、アイコンにいくつかのルールを適用したい

<div class="navigation__item"> 
    <span class="navigation__item__icon"></span> 
</div> 

を：

.navigation__item__icon { 
    color: black; 
} 

.navigation__item:hover .navigation__item__icon { 
    color: white; 
} 

私がすることができますこの次SCSSを使用して達成：ここ

.navigation__item { 
    &:hover { 
    .navigation__item__icon { <-- here 
     color: white; 
    } 
    } 

    &__icon { 
    color: black; 
    } 
} 

を、navigation__itemを書き込まないようにする方法はありますか？ "親ルール\要素"のようなもの。 論理構造のためにSassが好きなので、要素を持つnavigationブロック全体の名前を変更したい場合は、単にnavigationという名前をルートに変更してすべての名前を変更することができます。この場合、この利点が失われます。

更新：実際には、{}を使用せずにこれを行う方法が見つかりました。 &を複数回繰り返すことができます。

.navigation__item { 
    &:hover &__icon { 
    color: white; 
    } 

    &__icon { 
    color: black; 
    } 
} 

それは素晴らしいですが、私は&:hover自身のために多くのルールやルールを持っている場合、それはあまり意味がありません。質問はまだ開いています。{}ブロック内から兄弟要素の定義にアクセスすることは可能ですか？

Answer 1

スタイラスではPartial referenceがありますが、私はSASSには何も似ていません。親セレクタのための変数を使用することができ一つの解決策：

.navigation__item { 
    $selector: &; 
    &:hover { 
    #{$selector}__icon { 
     color: white; 
    } 
    } 

    &__icon { 
    color: black; 
    } 
} 

は便利ですが、あなたが別のためnavigation__itemクラスを変更です。

EDIT：私は間違った例を使用しましたが、今はOKです。