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