SASS 和 Bootstrap - mixins 与 @extend

Question

我正在使用 Bootstrap 的 SASS 端口，我想知道使用预定义的 mixin 和使用 SASS 的

@extend

之间是否有任何区别。

例如，如果我有：

<div class="wrapper">
    Some content here....
</div>

做和做有什么区别吗

.wrapper {
    @include make-row();
}

和

.wrapper {
    @extend .row;
}

？

如果没有区别，是否还有其他 mixin 不等同于单个

@extend

语句？如果没有这样的 mixins，为什么会有 mixins 存在？

Answer 1

@extend

和 mixin 之间的最大区别在于 css 的编译方式。在简单的例子中，它看起来并不多，但差异和影响是显着的，如果不小心使用的话，在野外可能会让人非常头疼。

@extend

有点像愚人金，乍一看很棒，但是......

让我们看一个简单的例子：

@扩展

.row {
    width: 50px;
}
.new-row {
    @extend .row;
}
.another-row {
    @extend .row;
}

编译为：

.row,
.new-row,
.another-row {
     width: 50px;
}

混合

@mixin row() {
    width: 50px;
}
.new-row {
    @include row();
}
.another-row {
    @include row();
}

编译为：

.new-row {
   width: 50px;
}
.another-row {
   width: 50px;
}

mixin 包含它所点击的所有属性 - 每次都会复制它们 - 而

@extend

对选择器进行分组并定义一次属性。这并不是很明显，因为差异在于编译的 css，但它有一些重要的含义：

加载订单

使用

@extend

，选择器将被分组在 sass 中遇到它们的第一个点，这可能会导致一些奇怪的覆盖。如果您定义一个选择器并使用

@extend

引入属性并尝试覆盖之前在 sass 中定义的属性，但在扩展属性在 css 中分组之后，覆盖将不起作用。这可能相当令人困惑。

考虑这组按逻辑顺序排列的 css 定义和可能的 HTML：

<div class='row highlight-row'></div>

:

.red-text {
    color: red;
}
.row {
    color: green;
}
.highlight-row {
    @extend .red-text;
}

编译为：

.red-text,
.highlight-row {
    color: red;
}
.row {
    color: green;
}

因此，即使 sass 排序使其看起来行颜色为红色，编译后的 css 也会使其变为绿色

分组不佳

@extend

可能会导致生成的 CSS 中选择器分组不佳。例如，您最终可能会得到三十或四十个不相关的事物，它们都共享相同的属性。使用

@extend

表示字体就是一个很好的例子。

筑巢

如果您使用深度嵌套的 sass（这可能是有益的，但不是最好的地方，除非您保持严格的纪律）并且您使用

@extend

，您将为您使用的每个

@extend

复制完全嵌套的选择器，导致css臃肿。我已经看过很多次了：

.selector-1 .selector-2 .selector-3 .selector-4,
.selector-1 .selector-2 .selector-3 .selector-4 a,
.selector-1 .selector-2 .selector-3 .selector-4 li,
.selector-1 .selector-2 .selector-3 .selector-4 td {
    font-family: arial;
}

如果您是 SASS 新手，那么查看编译后的 css 是值得的。

媒体查询

@extend

不适用于媒体查询，因为媒体查询不是选择器。

结论

我的经验法则是，如果您没有参数，则在 mixin 上使用

@extend

并且 如果您可以合理地定义 @extend 并在 sass 中附近存在的几个紧密相关的选择器之间共享它，例如，在定义 sass 模块的同一文件中。按钮是一个很好的使用 @extend 的例子：

%button {
    padding: 10px;
}
.call-to-action {
    @extend %button;
    background-color: $green;
}
.submit {
    @extend %button;
    background-color: $grey;
}

帮助做出选择的最佳文章是这里

PS，

%

符号是占位符扩展

的使用