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

  }
}

SCSS。引用第二级升序选择器

2 个答案: