可以给混合器声明参数,以便灵活的配置相关属性值,看如下scss代码:
@mixin antzone-div($color, $font-size) { color:$color; font-size:$font-size; } div{ @include antzone-div(blue,16px); }
上面的混合器具有两个参数,在调用混合器的时候,必须要传递两个参数,否则会报错。实际应用中,可能并非需要传递每一个参数,这个时候只要给参数设置一个默认值即可。scss代码实例如下:
@mixin antzone-div($color, $font-size:16px) { color:$color; font-size:$font-size; } div{ @include antzone-div(blue); }
上面的代码编译生成css代码如下:
div { color: blue; font-size: 16px; }
也可能font-size: 16px这句代码也不是必须的,只要将对应的参数默认值设置为null即可。scss代码实例如下:
@mixin antzone-div($color, $font-size:null) { color:$color; font-size:$font-size; } div{ @include antzone-div(blue); }
上面的代码编译为css代码如下:
div { color: blue; }