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混合功能的使用,包括:无参数,有参数,默认参数,参数不固定的情况