使用多个类与 @extend

Question

编辑：

自从问了这个问题，不仅发现每个修饰符只能有一个修饰符class，而且我还发现the BEM website itself recommends using extra classes for modifiers，所以我正式采用了那个方法。

我已经将 SASS 与 BEM 一起使用了一段时间，我想知道使用多个 class 作为修饰符与 [=13] 的优缺点是什么=]-ing 相应的 block/element class。有没有一种比另一种更受青睐？（考虑到我不会在 @media 个查询中包含 classes [它甚至应该重要吗？]）

多个 class 的示例：

<div class="btn btn--admin btn--primary">

VS

@extend-ing 的例子：

.btn {
    // ...
}

.btn--admin {
    @extend .btn

    // ...
}

.btn--primary {
    @extend .btn

    // ...
}

Answer 1

编辑一开始我没明白问题的重点。解释完之后就是我的答案了

结果是一样的，但是使用多个 class 修饰符可以在非 css 编译或编辑方式中提供更精细的控制（您可以更改元素属性而无需重新-编译 sass 代码或编辑 css）。它还将提供更详细的 html 代码阅读。通过阅读 btn btn-primary disabled 你会知道，无需使用检查器 o 转到 css 代码，你有一个按钮，具有 btn-primary 样式并且按钮是 disabled.与扩展其余 class 的单个 class button 相比，您可以获得更多信息。例如，如果其他人要使用您的代码或处理您的 project/website 或构建易于使用的框架，这是一种更合适的方法。

如果只是为了小 project/website 和小 maintenance/update，使用 extends 也是一个不错的选择。有时不需要为每个元素用很多 class 来填充 html。

第一种方法会导致更小的 css 和更冗长的 html。第二个选项会增加你 css 的大小，同时创建更“抽象”的代码阅读。

使用多个 classes 比扩展基础 class 甚至非填充扩展（定义为 %myextend { ... }.

更依赖于范围

考虑以下场景：您有多个 classes 并且它们在不同的嵌套级别（或范围）和事件通过不同的断点共享一些属性。使用多个 class 定义将需要大量代码和异常才能将所有 classes 组合在一起，并且需要您复制代码（以防跨多个媒体查询共享相同代码).

.base,
.parent .another,
.more-clases {
    // shared properties
}
@media (your-query) {
    .specific-query-class {
        //shared properties (repeated)
    }
}

在那种情况下，您将无法像使用 @extend:

那样将所有 classes 定义分组到一个定义范围内

%my-extend {
    // shared properties
}

.base,
.parent .another,
.more-clases {
    @extend %my-extend;
}
@media (your-query) {
    .specific-query-class {
        @extend %my-extend;
    }
}

这将允许 share/group 跨不同嵌套级别和媒体查询定义的属性块，而无需重复您的代码块。

使用 % 而不是 . 定义扩展将允许在不同的嵌套级别和媒体查询定义之间共享属性块。扩展的主要定义不会被编译为css：定义块将被复制到所有扩展规则。使用 . 定义会将邮件属性块输出到 css 并将所有扩展的 class 组合在一起，但是使用这种类型的扩展，您可以通过不同的媒体查询进行扩展。

希望对您有所帮助。

Answer 2

我想你想扩展多个类

.btn {

}

.btn__admin {

}

.btn__download {
   //to extend .btn.btn__admin
   @extend .btn;
   @extend .btn__admin; 
}

使用多个类与 @extend

Using multiple classes vs @extend

html

css

sass

bem

使用多个 类 与 @extend

Using multiple classes vs @extend

html

css

sass

bem

使用多个类与 @extend