SASS和Bootstrap-mixins与@extend [英] SASS and Bootstrap - mixins vs. @extend
问题描述
我正在使用 Bootstrap的SASS端口，我想知道是否有使用预定义的mixin和使用SASS的@extend之间的区别.
例如，如果我有:
<div class="wrapper">
Some content here....
</div>
做之间有什么区别
.wrapper {
@include make-row();
}
和
.wrapper {
@extend .row;
}
?
如果没有区别，是否还有其他mixin不等同于单个@extend语句?如果没有这样的mixins，为什么mixins甚至存在?
@extend和mixin之间的最大区别是css的编译方式.在简单的示例中看起来并不多，但是差异和含义很明显，如果不小心使用，可能会在野外引起极大的头痛. @extend有点像傻瓜金，乍看起来不错，但是...
让我们看一个简单的例子:
@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;
}
因此，即使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在媒体查询中不起作用，因为媒体查询不是选择器.
结论
我的经验法则是，如果没有参数，则在mixin上使用@extend；如果可以合理地定义@extend，并在附近存在的一些紧密相关的选择器中共享它，则可以在其上使用@extend在sass中，例如，在定义sass模块的同一文件中.按钮是很好使用的@extend的一个很好的例子:
%button {
padding: 10px;
}
.call-to-action {
@extend %button;
background-color: $green;
}
.submit {
@extend %button;
background-color: $grey;
}
帮助做出选择的最佳文章是占位符扩展
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.
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 @extend statement? If there aren't such mixins, why do the mixins even exist?
The big difference between @extend and 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. @extend is a little bit like fools gold, looks great at first, but ...
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 @extend groups 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:
Load order
With @extend the 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 @extend to 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.
Consider this logically ordered set of css definitions and the likely 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
Poor groupings
@extend can 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 @extend for fonts is a good example of this.
Nesting
If you are using deeply nested sass (which is not good, btw) and you use @extend you will duplicate the fully nested selector for every @extend you use, resulting in bloated css. I've seen this a lot:
.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.
Media queries
@extend do not work inside media queries, because media queries are not selectors.
Conclusion
My rule of thumb is to use an @extend over a mixin if you have no parameters and if 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:
%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
这篇关于SASS和Bootstrap-mixins与@extend的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
