二. 混合器
当样式变得越来越复杂,需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了,这时可以通过sass的混合器实现大段样式的重用。
为便于书写,@mixin 可以用 = 表示,而 @include 可以用 + 表示。
@mixin rounded-corners { /*定义混合器,目的是添加跨浏览器的圆角边框*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/*在样式表中通过@include来使用这个混合器,放在你希望的任何地方*/
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
/*sass最终生成:*/
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
如果你发现自己在不停地重复一段样式,那就应该把这段样式构造成优良的混合器.
- 混合器中使用css规则:
@mixin no-bullets {
list-style: none;
li { /*混合器中不仅可以包含属性,也可以包含css规则,包含选择器和选择器中的属性*/
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
/*最终,上边的例子如下代码: */
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
如果一个混合器只包含css规则,不包含属性,那么这个混合器就可以在文档的顶部调用.
- 给混合器传参
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
/*Sass最终生成的是:*/
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
a {
@include link-colors( /*这种形式的传参,参数顺序就不必再在乎了,只需要保证没有漏掉参数*/
$normal: blue,
$visited: green,
$hover: red
);
}
- 赋默认值
为了在@include混合器时不必传入所有的参数,我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式,默认值可以是任何有效的css属性值,甚至是其他参数的引用
@mixin link-colors($normal, $hover: $normal, $visited: $normal)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
//如果像下边这样调用:@include link-colors(red) $hover和$visited也会被自动赋值为red。