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上其他开发人员的类冲突的可能性：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: