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

不要在父元素和子元素上使用修饰符.box__something

Answer 2

如果我正确理解你的问题，我能感受到你的痛苦！一旦嵌套嵌套属性 & 更改为父项。

但是您可以像这样将原始 class 名称缓存为变量：

$box: box;

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

        .#{$box}__something { // <<< Is some better selector?
            background: pink;
        }
    }
}

上述方法的唯一问题是您最终会得到更大的编译量 CSS。这呈现为：

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

要减小输出的大小，您可以将 & 与变量方法结合使用，如下所示：

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

        #{$box}__something {
            background: pink;
        }
    }
}

这呈现为：

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

这样你可以更改变量中的 class 名称，所有内容都会更新，我也认为它读起来更好一些。

Answer 3

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

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

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

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

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

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

SCSS + BEM style children structure when parent has modificator

html

css

sass

bem