Sass的混合-@mixin,@include

1,无参数,有参数和带默认值参数的@mixin声明
sass文件内容:

//带参数,默认50
@mixin opa($opa:50){
opacity: $opa / 100;
filter:alpha(opacity=$opa);
}
1
2
3
4
5
//mixin需要在调用之前声明
.demo{
@include opa(10);
}
1
2
3
4
注意:
@mixin要在@include调用前声明
如果@mixin声明包含参数,则@include调用也必须传参,否则会报错
除非,以" 参数:默认值 "的方式声明参数,在不传参的情况下使用默认值
1
2
3
4
sass编译后:

.demo {
opacity: 0.1;
filter: alpha(opacity=10); }
1
2
3
2,不固定参数的@mixin声明
//参数不确定
@mixin shadow($shadow...){
box-shadow: $shadow;
}
1
2
3
4
sass编译后:

.demo {
opacity: 0.1;
filter: alpha(opacity=10);
box-shadow: 0 0 10px red, 0 0 20px yellow; }
1
2
3
4
以上简单举例说明了sass混合功能的使用,包括:无参数,有参数,默认参数,参数不固定的情况