Question

我想要输出： .selector.another-selector .selector__block{some declaration} 但我想筑巢它：
我正在使用＆amp;最后，我可以将它嵌套在__block下，但我怎样才能让它与.selector相邻？代码示例：

.selector{
  &__block{
  // i want to put my .another-selector declaration here
  .another-selector &{ 
    //syntax issue
    //need to make it .selector.another-selector .selector__block
  }
}

提前感谢。

Answer 1

如果嵌套选择器，那么它必须位于.selector__block上下文（&）中。

这里有2个解决方案：

您可以重复第一个选择器：

.selector {
  &__block {
      ...
      .another-selector.selector & { 
          // Here `&` means  `.selector__block`
      }
  }
}

你可以用不同的方式嵌套：

.selector {
  &__block {
    ...
  }
  &.another-selector &__block { 
     // Here `&` means  `.selector`
  }
}

也许第二种解决方案更好，因为它尊重inception rule并且不太依赖于DOM结构。

顺便说一下，您也可以尝试https://www.sassmeister.com/与您的选择器一起玩

Answer 2

我建议你根本不嵌套BEM。出于两个正当理由，请使用简单声明。

1）错误跟踪嵌套BEM很难，假设你从devtools得到一个.hero__heading的类。在进行搜索时，这与代码中的任何内容都不匹配。现在上面的例子并不难想象，但是继承具有嵌套结构的项目是一件痛苦的事。 我建议您阅读Harry Roberts article on code smells in css

2）如果想要覆盖其他类（例如你的情况），这样的嵌套通常会很复杂。

考虑以下代码：

.selector {
  background-color: deepskyblue;
}

.selector__block {
  color: lightblue;

  .another-selector & {
    color: lightcoral;
  }
}

Answer 3

@ Dejan.S我不是BEM的忠实粉丝（但那是另一个咆哮;-)。但是，如果您使用的是BEM，我认为嵌套将有助于说明层次结构和期望的内容

SCSS：

.selector {
    //  selector styles
    color: red;

    //  default selector block style 
    &__block { color: green; }

    //  selector variant selector block styles 
    &.foo &__block { color: blue;   }
    &.bar &__block { color: yellow; }
}

CSS输出：

.selector { color: red; }
.selector__block { color: green; }
.selector.foo .selector__block { color: blue; }
.selector.bar .selector__block { color: yellow; }

HTML：

<div class="selector">
    Selector  <!-- red -->
</div> 
<div class="selector">
    Selector  <!-- red -->
    <div class="selector__block">
        Selector Block  <!-- green -->
    </div>
</div>
<div class="selector foo">
    Selector  <!-- red -->
    <div class="selector__block">
        Selector Foo Block   <!-- blue -->
    </div>
</div>
<div class="selector bar">
    Selector  <!-- red -->
    <div class="selector__block">
        Selector Bar Block  <!-- yellow --> 
    </div>
</div>

scss嵌套语法：nest with parent adjoin class

3 个答案: