SCSS。参考二级升序选择器

Question

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

<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。避免重复类的另一个原因是如果父类改变了，它应该到处改变。是的，现在使用一些特定的工具来完成这项任务是非常微不足道的，但它仍然是一个容易出现错误的地方。

Answer 1

您的想法是正确的，但是您必须将 a:hover 放在顶层以获得您想要的结果。这不是您想要的，而是 SCSS 为您提供目标结果的唯一方式。

我想你在找这个：

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

第二次尝试，像这样？

.a {
  &:hover {
  color: red;

    .a__b {
      color: blue;
    }

  }
}

Answer 2

更新：优于原版

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