获取＆符号修饰符以继承父项的所有属性

Question

我正在使用 SASS 方便的符号表示法将 BEM 样式的修饰符添加到我的 classes:

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: magenta;

    &--selected {
        background: cyan;
    }
}

我正在探索只对我的元素应用单个 class 的可能性（例如：<div class="box--selected">...</div> 而不是 <div class="box box--selected">...</div>）。我想避免使用 @extend，它撒得太大了。目前我正在使用 mixins，它很好，但对于每个带有修饰符的 class 使用起来有点冗长。

我真正想做的是让&--selected继承所有父外壳的属性，仅来自父外壳 - 即忽略粗心的开发人员可能插入的.box的任何其他class定义。

Answer 1

我知道你已经表达了避免 @extend 的愿望，但这种方法可以让你避免其他开发人员对 .box 的定义，同时仍然实现你的目标。

您可以使用占位符来创建您自己的父外壳并扩展占位符（example of placeholder extension) 仅继承自占位符。作为占位符，不会与其他开发者的类发生冲突.box:

%box{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: magenta;
}
.box--selected{
    @extend %box;
    background: cyan;
}

与 mixins 相比，此方法缺少参数的使用，例如上述文章中的以下示例 [1]:

@mixin padMasterJ ($param: 10px) {
  padding: $param;
}

另一件值得注意的事情是，当 @extend 用于父选择时，结果将包括所有嵌套选择器 @extend 不能直接用于扩展嵌套选择器。

获取＆符号修饰符以继承父项的所有属性

Get ampersand modifier to inherit all properties from parent

sass

bem