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

    } 
}