SCSS。參考二級升序選擇器

Question

在避免碰撞的範圍內組織類的技術之一是擴展父級的類+添加一些後綴。例如：

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

從沒有複製的代碼，在SASS/SCSS文件的考慮，可以參考父與符號的幫助 - &，所以上述結構可以這樣來實現：

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

這是transfomed到：

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

但是困難出現時，人們需要得到這樣的css作爲結果：

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

由於主要思想不是重複選擇器，所以會出現一個問題 - 是否有引用二級父級的方法？我知道&&不是問題，但有沒有辦法模擬雙重＆號行爲？

.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

你的想法是正確的，但你必須把a：懸停到頂層才能得到你想要的結果。這不是你想要的，而是SCSS爲你提供目標結果的唯一方式。

我認爲你在尋找這樣的：

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

第二個嘗試，也是這樣嗎？

.a { 
    &:hover { 
    color: red; 

    .a__b { 
     color: blue; 
    } 

    } 
}