SASS和Bootstrap - mixins vs. @extend

Question

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

例如,如果我有:

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

这样做有什么区别吗？

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

和

.wrapper {
    @extend .row;
}

？

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

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中选择器分组不良.例如,你最终可能会共享三十或四十个不相关的东西.使用@extendfor fonts就是一个很好的例子.

嵌套

如果您正在使用深度嵌套的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: ariel;
}

如果你是SASS的新手,那么查看已编译的css是值得的.

媒体查询

@extend 不在媒体查询中工作,因为媒体查询不是选择器.

结论

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

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

有助于做出选择的最佳文章就在这里

PS,%标志是占位符扩展的使用