SCSS。参考二级升序选择器

在避免冲突的范围内组织类的一种技术是扩展父类的类并添加一些后缀。例如：

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

考虑到不重复代码，在sass / scss文件中，可以借助＆符号来引用父对象&，因此可以实现上述结构：

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

转换为：

.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。避免重复类的另一个原因是，如果更改了父类，则应该在任何地方都进行更改。是的，如今，使用一些特定的工具是一项相当琐碎的任务，但是仍然会出现错误。