SASS和Bootstrap-mixins与@extend

Question

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

例如，如果我有：

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

两者之间有什么区别吗

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

和

.wrapper {
    @extend .row;
}

？

如果没有区别，是否还有其他mixin不等同于单个@extend语句？如果没有这样的混合器，为什么混合器甚至存在？

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;
}

因此，即使sas​​s排序使行颜色看起来像红色，编译后的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 在媒体查询中不起作用，因为媒体查询不是选择器。

结论

我的经验法则是，@extend如果您没有参数， 并且
可以合理地定义@extend并在sass中附近存在的一些紧密相关的选择器（例如，在定义该文件的同一文件中）之间共享它，则可以使用over mixin
sass模块。按钮是很好使用的@extend的一个很好的例子：

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