SASS和Bootstrap - mixins vs. @extends [英] SASS and Bootstrap - mixins vs. @extends

问题描述

我正在使用 Bootstrap的SASS端口，我想知道是否使用pre使用SASS的 @extends 。

例如，如果我有

 < div class =wrapper> 
这里有一些内容.... 
< / div> 
  

是否有任何区别

  .wrapper {
 @include make-row（）; 
} 
  

和

  .wrapper {
 @extends .row; 
} 
  

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

解决方案 @extends ，而mixin是css的编译方式。它在简单的例子看起来不是很多，但是差异和影响是显着的，如果不小心使用，它可能是野生的真正头痛。 @extends 有点像傻瓜金，看起来不错，但... ...

一个简单的例子：

@extends

  .row {
 width：50px; 
} 
 .new-row {
 @extends .row; 
} 
。其他行{
 @extends .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包括所有的属性 - 每次复制它们 - @extends 对选择器进行分组并定义属性一次。这不是直接显而易见的，因为区别在于编译的css，但它有一些重要的含义：

加载顺序

使用 @extends 选择器将被分组在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中的选择器分组较差。你可以结束三十或四十个不相关的东西共享相同的属性，例如。使用 @extends 字体就是一个很好的例子。

嵌套 p>

如果你使用深嵌套的sass（这不好，btw），你使用@extends，你将复制完全嵌套的选择器为你使用的每个@extends，导致in肿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，

媒体查询

@extends b $ b

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

 ％button {
 padding：10px; 
} 
 .call-to-action {
 @extend％button; 
 background-color：$ green; 
} 
 .submit {
 @extend％button; 
 background-color：$ gray; 
} 
  

最好的文章帮助选择这里

PS，％符号是使用占位符延伸

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 @extends.

For instance, if I have

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

is there any difference between doing

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

and

.wrapper {
    @extends .row;
}

If there's no difference, are there other mixins that aren't equivalent to a single @extends statement? If there aren't such mixins, why do the mixins even exist?

解决方案

The big difference between @extends 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. @extends is a little bit like fools gold, looks great at first, but ...

Let's look at a simple example:

@extends

.row {
    width: 50px;
}
.new-row {
    @extends .row;
}
.another-row {
    @extends .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 @extends 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 @extends 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 @extends for fonts is a good example of this.

Nesting

If you are using deeply nested sass (which is not good, btw) and you use @extends you will duplicate the fully nested selector for every @extends 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: ariel;
}

If you're new to SASS it pays to look at the compiled css.

Media queries

@extends do not work inside media queries, because media queries are not selectors.

Conclusion

My rule of thumb is to use an @extends over a mixin if you have no parameters and if you can reasonably define the @extends 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 @extends:

%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 vs. @extends的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！