SCSS。参考二级升序选择器

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

<div class="a">
  <div class="a__b">
  <div class="a__c">
    <span class="a__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;
    }
  }
}

---

因此，出于避免冲突的考虑，很多时候类都有很长的名称。这就是重复的选择器使代码看起来很可怕的时候。想象一下，这里不是

。而是一个
选择器：
。自定义图层列表面板conatiner
。避免重复类的另一个原因是，如果父类发生更改，则应该在任何地方都进行更改。是的，现在使用一些特定的工具，这是一项相当琐碎的任务，但它仍然是一个可能出现错误的地方
 你的想法是对的，但你必须将a:悬停置于顶层才能得到你想要的结果。这不是你想要的，而是SCSS给你目标结果的唯一方式

我想你在找这个：

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

第二次尝试，像这样

.a {
  &:hover {
  color: red;

    .a__b {
      color: blue;
    }

  }
}

更新：优于原始版本

.a{
$祖父母：&；
&：悬停{
颜色：红色；
&#{$祖父母}{
颜色：蓝色；
}
}
}

及
原件：

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

谢谢，但是不行。我想扩展这个
&:hover
表达式。像第二次尝试吗？（我不/无法理解您要选择哪一个父级以及原因。您有一个示例吗？）谢谢，但仍然没有：）主要思想是消除这种构造，因为在原始代码中有一个类，如：
。自定义层列表面板
，而不是a，我不想复制它。它看起来很难看。所以你想给所有使用
.a\u b
-类的标签添加一个define
：hover
？在我的帖子中，我希望得到css，但我不想在我的sass中多次使用
.a
选择器。我也不想使用
.a\u b
选择器。是的，就是这样！谢谢，太棒了！很遗憾，我不能接受你的答案并两次投票：非常巧妙。我向上投了一票，戴上帽子，向“阿·辛格：）致意。（您的答案应该省略
{$grandparent}
前面的
&
，尽管这是OP的预期结果。）
.a:hover {
  color: red;
}
.a:hover .a__b {
  color: blue;
}