SCSS。第2レベルの昇順セレクタを参照する

Question

衝突を回避する範囲でクラスを整理する手法の1つは、親のクラスを拡張し、いくつかの接尾辞を追加することです。

.a{ 
&__b{} 
&__c{} 
&__d{} 

： - ：たとえば、次のように実現することができる構造上のように &コードを複製ないの考察から

<div class="a"> 
    <div class="a__b"> 
    <div class="a__c"> 
    <span class="a__d"> 

は、SASS/SCSSファイルで、1は、アンパサンドの助けを借りて、親を参照することができます

.a__b {} 
.a__c {} 
.a__d {} 

しかし、一つの結果として、このようなcssを取得する必要があるときに困難が表示されます。：にtransfomedさ

.a:hover{ 
    color: red; 
} 
.a:hover .a__b{ 
    color: blue; 
} 

主なアイデアはセレクタを複製することではないので、2番目のレベルの親を参照する方法がありますか？私は&&が問題ではないことを知っていますが、ダブルアンパサンドの動作をシミュレートする方法はありますか？

.a{ 
    &:hover{ 
     color: red; 
     & __b { /* & -> .a:hover, but I need just .a */ 
      color: blue; 
     } 
    } 

} 

ない問題、.aが複製されます。

.a:hover { //here 
    color: red; 
    .a__b { //here 
    color: blue; 
    } 
} 

もない問題：だから

.a { //ok 
    &:hover { 
    color: red; 

    .a__b { //oops, duplicated selector 
     color: blue; 
    } 
    } 
} 

、回避衝突の配慮から、何度もクラスが持っています長い名前。そしてそれは、複製されたセレクタがコードを恐ろしく見せてしまうときです。代わりに.aセレクタの代わりに、.custom-layers-list-panel-conatinerがあると想像してください。重複したクラスを避ける別の理由は、親クラスが変更された場合は、どこでも変更する必要があるということです。はい、最近、いくつかの特定のツールでは非常に簡単な作業ですが、まだ間違いが現れる場所が残っています。

Answer 1

更新：オリジナル

.a{ 
    $grandparent: &; 

    &:hover{ 
     color: red; 
    & #{$grandparent}__b { 
      color: blue; 
     } 
    } 
} 

と オリジナルよりも良い：

@function r-pseudo($s) { 
    $string: nth(nth($s, 1), 1); 
    @return str-slice($string, 0, str-index($string, ':') - 1); 
} 

.a{ 
    &:hover{ 
     color: red; 
    & #{r-pseudo(&)}__b { 
      color: blue; 
     } 
    } 
} 

は両方が生成

.a:hover { 
    color: red; 
} 
.a:hover .a__b { 
    color: blue; 
} 

Answer 2

あなたの考えは正しいですが、あなたはあなたが望む結果を得るためにトップレベルにホバーを置く必要があります。それはあなたが望むものではありませんが、SCSSがあなたの目標とする結果をもたらす唯一の方法です。

私はあなたがこれを見ていると思う：

.a:hover { 
    color: red; 
    .a__b { 
    color: blue; 
    } 
} 

第二には、このように、してみてください？

.a { 
    &:hover { 
    color: red; 

    .a__b { 
     color: blue; 
    } 

    } 
}