scss-null在@mixin传参中的应用

　　可以给混合器声明参数，以便灵活的配置相关属性值，看如下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; 
}

 

转载于:https://www.cnblogs.com/ibabyli/p/9874758.html