SASS 和 Bootstrap - 混合与@extend

Question

我正在使用 SASS port of Bootstrap，我想知道使用预定义的 mixins 和使用 SASS 的 @extend.[=18 之间是否有任何区别=]

例如，如果我有：

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

和做有什么区别吗

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

和

.wrapper {
    @extend .row;
}

?

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

Answer 1

@extend 和 mixin 的最大区别在于 css 的编译方式。它在简单的例子中看起来并不多，但差异和含义是显着的，如果不小心使用，在野外可能会让人非常头疼。 @extend有点像fools gold，乍一看还不错，但是...

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

@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 中的选择器分组不佳。例如，您最终可能会得到三十或四十个不相关的东西，它们都共享相同的属性。对字体使用 @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:

的一个很好的例子

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

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

PS，%符号是placeholder extends

的用法

SASS 和 Bootstrap - 混合与@extend

SASS and Bootstrap - mixins vs. @extend

css

sass

twitter-bootstrap