在父选择器悬停时写入子选择器的最佳SASS实践是什么？

Question

当我在parent中有一个悬停事件时，我对写入子选择器有疑问。

假设我有这样的HTML，

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

在sass中，

.root {
  $root: &;

  &__element {
    &:hover {
      #{$root}__sub-element {color: red;} // question comes here, why 
                                          // not using .root_sub-
                                          // element?
    }
  }
}

我想要的是在root__element中发生悬停事件，在root__sub-element中发生颜色变化。我应该使用&符号来保持SASS，还是直接使用'.root__sub-element'？

Answer 1

你应该保持SASS。

• 我注意到你在你的问题中加了'bem‘标签。
• 根据BEM，你的块元素类继续你的最后一个子类的前缀。http://getbem.com/naming/

要点1:

如果您有另一个具有相同行为的元素。硬编码的类.root__sub-element将中断。请考虑以下具有多个根类的sass代码。

SASS代码：

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

点2:

这是非常罕见或不建议的做法，但假设您的根块类.root更改为.newroot。根据bem，您的子类将使用新的前缀进行更改。在这里，硬编码的类.root__sub-element将被破坏，你需要手动将其更改为all area。

否则

CSS是：

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

预期的CSS：

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