混合器@mixin和@include用于规则的复用
两者搭配使用，用于规则的复用。@mixin horizontal-list定义一个混合器，类似定义变量，只不过它对应的不是属性值，而是任意代码段，可以是一个（或多个！）规则，也可以只是一条、几条声明，还可以是声明跟规则的混合体，非常灵活。@include horizontal-list命令就是引用这个代码段，等于把@mixin horizontal-list内的全部代码复制到了这里。
@mixin horizontal-list {
li {
float: left;
margin-right: 10px;
}
}
#header ul.nav {
@include horizontal-list;
float: right;
}
#footer ul.nav {
@include horizontal-list;
margin-top: 1em;
}
何时使用混合器？
利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-corners、fancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。
混合器在某些方面跟CSS的类（class）很像，都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在HTML文件中应用的，而混合器是在scss中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述：类用来描述HTML元素的含义而不是HTML元素的外观。而另一方面，混合器是展示性的描述，用来描述一条CSS规则应用之后会产生怎样的效果。类名可以用诸如danger、warning这种有语义的名称，混合器可以用外观描述性的词，比如rounded-corners是圆角的意思，line-height-1.5表示1.5倍的行高。
进阶：预设了参数的@mixin
@mixin horizontal-list($spacing: 10px, $dangercolor) {
li {
float: left;
margin-right: $spacing;
color: $dangercolor;
}
}
#header ul.nav {
@include horizontal-list(15px, #ff0000);
float: right;
}
#footer ul.nav {
@include horizontal-list(20px, $dangercolor: red);
margin-top: 1em;
}
在代码块的名字horizontal-list的后面加上($spacing: 10px)，$spacing是参数变量名，10px是初始值，然后在代码块使用$spacing，这样，当有@include horizontal-list，复制来的margin-right: $spacing就是margin-right: 10px，如果更改了变量的值，比如@include horizontal-list(20px)，那么等同于margin-right: 20px。
如果你觉得@include horizontal-list(15px, #ff0000);中的15px, #ff0000不够直观，总要去找20px对应的是什么变量，那么你还可以用更直观的方式：@include horizontal-list(20px, $dangercolor: red);。
可以给混合器（还有参数）传入变量、列表（即数组）、映射（即对象），混合器（和函数）会自动将这些转换为参数列表。
问题一，@mixin+@include跟变量$有什么区别？
相同点：
都要起个名字，这个名字都是只在scss环境有效，HTML中无效。
不同点：
变量$只指代一个属性值，或者属性值的一部分，比如20px、100%、red、1px solid yellow等。
@mixin指代任意代码段，比变量厉害得多。
问题二，@mixin+@include跟变量@import有什么区别？
相同点：
都是忠实的把代码段贴入命令所在位置。
不同点：
@import只能引入文件，后面只能跟文件名，需要你先有一个文件；
@include只能引入代码段，需要你先用@mixin定义一个代码段。
网友评论