父母悬停时编写子选择器的最佳SASS实践是什么

Question

当我在父级中有悬停事件时，我对编写子级选择器有疑问。

说我有这样的 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会坏掉，你需要手动把它改成所有区域。

否则：

CSS 是：

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

预期的 CSS：

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