Question

请问是否可以设置内部元素的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类的样式，你必须将它放在它自己的类中，如下图所示，你不能将它用于尾随{{ 1}}我们放置了&的类。

我建议你玩我的sassmeister要点，看看你能想出什么结果。

&__something

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

Answer 2

修饰符不应该用在父元素和子元素.box__something

上

Answer 3

如果我理解你的问题，我会感到痛苦！只要将嵌套属性$box: box; .#{$box} { .#{$box}__something { background: blue; } .#{$box}--rounded { background: green; .#{$box}__something { // <<< Is some better selector? background: pink; } } }更改为父级，就会挂起。

但是，您可以将原始类名称缓存为变量，如下所示：

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

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

要缩小输出的大小，您可以将.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;
}

这将呈现：

x << y

这样你可以改变变量中的类名，一切都得到更新，我也觉得它看起来更好。

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

3 个答案: