前端开发小技巧css预处理语言sass
混合器
混合器使用@mixin标识符定义，通过@include来使用这个混合器，用来解决大段重用的代码。
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & {
height: 1px;
}
}
.clearfix {
@include clearfix;
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1px;
}
最强大的一点就是如同函数一般，可以传参，不仅可以指定默认值，并且可以使用关键词参数，这样就不用管参数前后顺序了：
@mixin border-value($width: 1px, $color: #333, $style: solid) {
border-width: $width;
border-color: $color;
border-style: $style;
}
/*不传参*/
h1 {
@include border-value;
}
/*传参*/
h2 {
@include border-value(2px, #666, dashed);
}
/*关键词传参*/
h3 {
@include border-value($style: dashed, $width: 3px, $color: #999);
}
/*不传参*/
h1 {
border-width: 1px;
border-color: #333;
border-style: solid;
}
/*传参*/
h2 {
border-width: 2px;
border-color: #666;
border-style: dashed;
}
/*关键词传参*/
h3 {
border-width: 3px;
border-color: #999;
border-style: dashed;
}
