twitter-bootstrap SASS 和 Bootstrap - mixins 与 @extend
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30744625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SASS and Bootstrap - mixins vs. @extend
提问by Ellis Michael
I'm using the SASS port of Bootstrap, and I'm wondering if there's any difference between using the pre-defined mixins and using SASS's @extend.
我正在使用Bootstrap的SASS 端口，我想知道使用预定义的 mixins 和使用 SASS 的@extend.
For instance, if I have:
例如，如果我有：
<div class="wrapper">
Some content here....
</div>
Is there any difference between doing
做有什么区别吗
.wrapper {
@include make-row();
}
and
和
.wrapper {
@extend .row;
}
?
?
If there's no difference, are there other mixins that aren't equivalent to a single @extendstatement? If there aren't such mixins, why do the mixins even exist?
如果没有区别，是否还有其他不等同于单个@extend语句的mixin ？如果没有这样的 mixin，为什么 mixin 会存在？
回答by Toni Leigh
The big difference between @extendand a mixin is the way the css is compiled. It doesn't look like much in simple examples, but the differences and implications are significant and can be a real headache in the wild if used carelessly. @extendis a little bit like fools gold, looks great at first, but ...
@extend和 mixin之间的最大区别是 css 的编译方式。在简单的示例中它看起来并不多，但差异和含义是显着的，如果使用不慎，在野外可能会令人头疼。@extend有点像傻瓜黄金，乍一看还不错，但是……
Let's look at a simple example:
让我们看一个简单的例子：
@extend
@延长
.row {
width: 50px;
}
.new-row {
@extend .row;
}
.another-row {
@extend .row;
}
compiles into:
编译成：
.row,
.new-row,
.another-row {
width: 50px;
}
mixin
混入
@mixin row() {
width: 50px;
}
.new-row {
@include row();
}
.another-row {
@include row();
}
compiles into:
编译成：
.new-row {
width: 50px;
}
.another-row {
width: 50px;
}
A mixin includes the properties everywhere it is hit - copying them each time - whereas an @extendgroups the selectors and defines the properties once. This isn't immediately obvious, because the difference is in the compiled css but it has some important implications:
mixin 包含它被命中的任何地方的属性 - 每次都复制它们 - 而一个@extend组合选择器并定义一次属性。这不是很明显，因为不同之处在于编译的 css，但它有一些重要的含义：
Load order
加载顺序
With @extendthe selectors will be grouped at the first point in the sass where they are encountered which can lead to some weird over-riding. If you define a selector and use @extendto bring in a property to and try to override a property defined earlier in your sass, but after the point at which the extended properties are grouped in the css then the override will not work. This can be quite perplexing.
随着@extend选择器会在遇到他们的萨斯这可能会导致一些奇怪的压倒一切的第一个点进行分组。如果您定义了一个选择器并用于@extend将属性引入并尝试覆盖之前在 sass 中定义的属性，但是在扩展属性在 css 中分组的点之后，覆盖将不起作用。这可能非常令人困惑。
Consider this logically ordered set of css definitions and the likely HTML: <div class='row highlight-row'></div>:
考虑一下这组按逻辑顺序排列的 css 定义和可能的 HTML <div class='row highlight-row'></div>：
.red-text {
color: red;
}
.row {
color: green;
}
.highlight-row {
@extend .red-text;
}
compiles into:
编译成：
.red-text,
.highlight-row {
color: red;
}
.row {
color: green;
}
So even though the sass ordering makes it look like the row colour would be red, the compiled css will make it green
因此，即使 sass 排序使它看起来像行颜色是红色，编译的 css 也会使它变成绿色
Poor groupings
不良分组
@extendcan result in poorly grouped selectors in the resulting css. You can end up with thirty or forty unrelated things all sharing the same property for example. Using @extendfor fonts is a good example of this.
@extend可能会导致生成的 css 中的选择器分组不佳。例如，您最终可能会得到 30 或 40 件不相关的东西，它们都共享相同的属性。使用@extendfor fonts 就是一个很好的例子。
Nesting
嵌套
If you are using deeply nested sass (which is not good, btw) and you use @extendyou will duplicate the fully nested selector for every @extendyou use, resulting in bloated css. I've seen this a lot:
如果您正在使用深度嵌套的 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;
}
If you're new to SASS it pays to look at the compiled css.
如果你是 SASS 的新手，看看编译的 css 是值得的。
Media queries
媒体查询
@extenddo not work inside media queries, because media queries are not selectors.
@extend不要在媒体查询中工作，因为媒体查询不是选择器。
Conclusion
结论
My rule of thumb is to use an @extendover a mixin if you have no parameters andif you can reasonably define the @extend and share it amongst a few tightly related selectors that exist nearby in the sass, for example, in the same file that defines a sass module. Buttons are a good example of well used @extend:
我的经验法则是，@extend如果您没有参数，并且您可以合理地定义 @extend 并在 sass 中存在的几个紧密相关的选择器之间共享它，例如，在定义一个 sass 模块。按钮是很好用的@extend 的一个很好的例子：
%button {
padding: 10px;
}
.call-to-action {
@extend %button;
background-color: $green;
}
.submit {
@extend %button;
background-color: $grey;
}
The best article to help make the choice is here
帮助做出选择的最佳文章在这里
PS, the %sign is a use of placeholder extends
PS，%标志是使用占位符extends
