为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。
@extend指令通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。
@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数，因此比@extend更加灵活和强大。
定义Mixins
通过@mixin加名称的方式就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
由于历史原因，连字符和下划线被认为是相同的，也就是说 @mixin button-large { }和 @mixin button_large { } 是一样的。
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
使用@mixin指令
你可以通过@include来调用具有相同名称的mixin模块。
.button-green {
@include button;
background-color: green;
}
比如通过@include调用我之前创建名为button的mixin模块，那么解析后的CSS就如下所示：
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background-color: green;
}
正如你所预期的那样，@include被名为button的混合模块内的样式所取代。同时我在.button-green中添加的background-color样式依然保留着。
在mixin模块的定义中还可以包含其他的mixin。比如：
@mixin button-blue {
@include button;
@include link;
}
所以你可以通过以包含多种简单mixin模块的方式创建较为复杂的mixin模块。
当Mixins模块包含选择器和规则集，也就是mixins包含的内容本身就是有效的CSS样式时，他们就可以在其他规则集外被调用。比如本文之前创建的名为link的mixin模块：
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
之后我们可以直接调用这个模块，即使不在一个选择器内。
@include link;
这段代码将会被解析为：
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
之所以能这样调用是因为这个mixin模块内既包含了选择器也包含了样式，如果没有选择器，那么编译后将不会有内容显示。比如我们在选择器外直接调用button这个mixin模块，那么将不会有东西被编译。
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
@include button;
不会被编译是因为你的样式没有被应用到任何元素上。
参数的使用
Mixins可以接收和使用参数，这使得它比 @extend更加强大和灵活。我更新了之前的button模块，增加了名为background的参数并将其传递给模块。
@mixin button($background) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮，那么就可以使用以下代码：
.button-green {
@include button(green);
}
当Sass被编译时，值green就被传递给@mixin并成为变量$backround的值。编译后的代码如下：
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green;
}
你还可以在@mixin和@include中传递多个参数，参数间用逗号隔开。比如：
@mixin button($background, $color) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: $color;
background: $background;
}
.button-green {
@include button(green, #fff);
}
给参数设置默认值
你可能会好奇如果在定义mixin时定义了参数，但是在@include调用时没有传递参数会发生什么。这种情况下你会收到一个编译错误的提示。同时我相信这种情况一定不是你想看到的。你可以通过在mixin中定义参数的时候给它设置一个默认值，从而来避免这种错误。
@mixin button($background: green) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
现在如果你在调用的时候忘记传递参数值
.button-green {
@include button;
}
你的代码将会使用你设置的参数默认值来解析，在这个例子中也就是green这个值。
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green;
}
当然，你也可以通过提供一个参数值来覆盖这个默认值。
.button-blue {
@include button(blue);
}
这时将会使用你提供的值来编译代码
.button-blue {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: blue;
}
关键字参数
为了帮助你的代码更加容易理解，你可以在传递值给mixin时将参数名称和参数值一并传递过去。
.button-green {
@include button($background: green, $color: #fff);
}
关键字参数会额外增加一些代码，但是这会使得你的@include更加容易理解。比如，上面那段代码就比下面这段代码更加容易理解，因为上面的代码明确指出了green和#fff分别是什么。
.button-green {
@include button(green, #fff);
}
虽然选择器的名称给了我们一些线索，可以大概推断出第一个参数代表什么，但是对于第二个参数却没有任何提示作用，而且一年后你很可能不会再记得这个参数的含义。
一起传递关键字名称和值也被称为命名参数，你也可以以任意顺序传递命名参数。下面两种传递方式解析后会得到相同的结果。
.button-green {
@include button($background: green, $color: #fff);
}
.button-green {
@include button($color: #fff, $background: green);
}
网友评论