当父项处于悬停状态时，SASS编写子选择器的最佳实践是什么

当父级中有悬停事件时，我怀疑是否会编写子选择器

假设我有这样的HTML

<div class="root">
  <div class="root__element">
    <div class="root__sub-element" />
  </div>
</div>

我想要的是悬停事件发生在

root\u元素

中，

root\u子元素

中的颜色变化。

---

我应该使用符号和来保存SASS，还是直接使用“.root\u sub-element”？

您应该保存SASS。

• 我注意到你在问题中加了“bem”

• 根据BEM，块元素类将继续使用最后一个子类的前缀

第1点：

如果您有另一个具有相同行为的元素。硬编码类

.root\u子元素

将中断。请考虑下面的具有多个根类的SASS代码。< /P> SASS代码：

$roots: root, newroot;
@each $r in $roots {
  .#{$r}{
    $root: &;
    &__element {
      &:hover {
        #{$root}__sub-element {color: red;}
      }
    }
  }
}

第2点：

这是非常罕见或不建议的做法，但假设您的根块类

.root

更改为

.newroot

。根据bem，您的子类将更改为新前缀。 在这里，硬编码类

。根\u子元素

将中断，您需要手动将其更改为所有区域

否则：

CSS是：

.newroot__element:hover .root__sub-element {
  color: red;
}

预期CSS：

.newroot__element:hover .newroot__sub-element {
  color: red;
}

---

我为这个做了混音。这里是我的另一个答案：

$root=&

应该是

$root:&@Sachink nice catch:）非常好的解释。在这两种情况下，使用变量是唯一的选择。顺便说一句，我确实在命名中使用了边界元，但不是很边界元，无法说服自己使用B_ue_ue_ue_ue--M:）
.newroot__element:hover .newroot__sub-element {
  color: red;
}