Sass的混合-@mixin,@include

1,无参数,有参数和带默认值参数的@mixin声明

sass文件内容:

//带参数,默认50@mixin opa($opa:50){  opacity: $opa / 100;  filter:alpha(opacity=$opa);}

//mixin需要在调用之前声明.demo{  @include opa(10);}

注意:    @mixin要在@include调用前声明    如果@mixin声明包含参数,则@include调用也必须传参,否则会报错    除非,以" 参数:默认值 "的方式声明参数,在不传参的情况下使用默认值

sass编译后:

.demo {  opacity: 0.1;  filter: alpha(opacity=10); }

---

2,不固定参数的@mixin声明

//参数不确定@mixin shadow($shadow...){  box-shadow: $shadow;}

sass编译后:

.demo {  opacity: 0.1;  filter: alpha(opacity=10);  box-shadow: 0 0 10px red, 0 0 20px yellow; }

---

以上简单举例说明了sass混合功能的使用,包括:无参数,有参数,默认参数,参数不固定的情况