获取 & 修饰符以从父级继承所有属性

Question

我正在使用 SASS 方便的 & 符号将 BEM 样式的修饰符添加到我的类中：

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

    &--selected {
        background: cyan;
    }
}

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

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

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不能用于直接扩展嵌套选择器。