html - SCSS + BEM 样式子结构当父有修饰符时

Question

请问是否可以为 --rounded 内的元素设置 scss？我不想使用 .box__something，但我需要修改依赖于父修饰符的子项

<div class="box">
    <div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
    <div class="box__something">Hi</div>
</div>

.box {
    &__something {
        background: blue;
    }
    &--rounded {
        background: green;

        .box__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

Answer 1

Sass 没有任何很好的内置解决方案来解决您的问题，这是一个已经被探索过很多次的问题。但是，您可以通过使用 & 帮助程序加入您希望加入的类，以稍微不优雅的方式获得您想要的结果。我已经包括了一个现场example here .

虽然这确实有效，但你必须意识到，如果你想直接设置 .box--rounded 类的样式，你必须将它放在它自己的类中，如下所示，你不能将它与我们在 &__something 上放置的尾随 & 类。

我建议您尝试一下我的 sassmeister 要点，看看您能得出什么结果。

.box {
    &__something {
      background: blue;
    }
    &--rounded {
      background: green;
    }
    &--rounded & {
      &__something {
        background: pink;
    }
  }
}

我希望这已经解决了您的问题。