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，还是直接使用＆＃39; .root__sub-element＆＃39;？

Answer 1

你应该保持SASS。

我注意到你标记了'bem＆＃39;在你的问题中。
根据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;
}

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

1 个答案: