Sass 混合器使用

1、混合器定义
当在你的站点中样式变得越来越复杂。重用代码越来越多。，独立变量就没有办法应付这处情况。这时你可以通过 sass的混合器实现大段样式的重用。
混合器定义：@mixin 标识符定义。
@mixin bg{
background-color:blue;
font-size:14px;
}
.bg{
color:red
@include bg;
}
//最终css生成的样式。
.bg{
color:red;
background-color:blue;
font-size:14px;
}
2、何时使用混合器。
利用混合器，可以很容易 地在样式表的不同地方共享样式。如果 你发现自己在不停地重复一段样式。那就应该把这段样式构造成优良的混合器。尤其是这样式本身就是一个逻辑单元，比如说明一组放在一起有意义的属性。
判断 一组属性是否应该组合成一个混合器，一条经验法则告诉我们这个混合器想出一个的名称。来修饰这个属性样式。那么就能够构造一个好的混合器。比如。round-corners ,no-bullets,等class名。
3、混合器使用规则。
混合器可以包含属性，也可以包含css规则，包含选择器、选择器中的属性。
如下所示：
@mixin menusbg{
color:blue;
li{
font-size:16px;
height:45px;
}
}
当一个包含css 规则 的混合器通过 @include 包含在一个父规则中时，在混合器中的规则 最终会生成父规则 中的嵌套规则 。如下所示。
ul.menus{
margin-top:15px;
@include menusbg;
}
4、混合器传参
混合器可以通过在@include 混合器传参。来这生成不同的精确的样式。参数其实就是可以赋值给css属性的变量。举例：
@mixin link-colors($normal,$hover,$visied)
{
color:$normal;
&:hover{color:$hover;}
&:visited{color:$visited;}
}
当混合被@include时，你可以把它当作一个css函数来传参。如下所示。
a{
@include link-colors(blue,red ,green);
}
//生成结果如下：
a{color:blue}
a:hover{color:red}
a:visited{color:green;}
以下是另一种书写方式，这种方式更直观的区分每一个参数含义。语法$ame:value;
a{
@include link-colors(
$normal:blue,
$visited:green,
$hover:red
);
}
注意：混合声明时给参数赋默认值。
5、默认参数值
为了在@include 混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name:default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，举例：
@mixin link-colors( $normal,$hover:$normal, $visited:$normal)
{
color:$normal;
&:hover{color:$hover;}
&visited{color:$visited;}
}
a
{
@include link-colors(red)
}
a{
color:red;
}
a:hover{color:red}
a:visited{color:red;}
6、继承
选择器继承就是一个选择器可以继承另一个选择器的所有样式和属性。 使用@extend实现，举例：
.tip{
color:orange;
border:solid 1px red;
}
.tipMessage{
@extend .tip;
font-size:14px;
}