SASS and Bootstrap - mixins vs. @extend

Question

我正在使用Bootstrap的SASS端口，我想知道使用预定义的mixins和使用SASS的@extend之间是否有任何区别。

例如，如果我有:

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

和

有什么区别吗?

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

和

.wrapper {
    @extend .row;
}

?

如果没有区别，是否存在其他不等同于单个@extend语句的mixins ?如果没有这样的混合，为什么还要存在这种混合呢?

Answer 1

@extend和mixin的最大区别在于css的编译方式。在简单的示例中，它看起来并不多，但其差异和含义非常重要，如果不小心使用，在实际环境中可能会令人头痛。@extend有点像傻瓜金，一开始看起来很棒，但是…

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

@extend

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

编译成:

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

mixin

@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中选择器分组不佳。例如，你可能会得到30或40个不相关的东西，它们都共享相同的属性。使用@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不能在媒体查询中工作，因为媒体查询不是选择器。

结论

我的经验法则是，如果你没有参数和，如果你可以合理地定义@extend，并在sass附近存在的几个紧密相关的选择器中共享它，例如，在定义sass模块的同一文件中，使用@extend而不是mixin。按钮是使用@extend:

的一个很好的例子

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

最好的帮助你做出选择的文章在这里

PS, %符号是占位符扩展