scss-@mixin传参

　　混合器一个很重要特性就是可以传递参数，可以根据不同场景来定制css代码的复用。极大提高了混合器的适用性，看如下scss代码实例：

@mixin makeradius($radius) {
  border-radius: $radius;
}
antTest{
  background-color: blue;
  border: 4px solid #ccc;
  @include makeradius(8px);
}

　　编译生成的css代码如下：

antTest{
  background-color: blue;
  border: 4px solid #ccc;
  border-radius: 8px; 
}

　　这样的话，圆角尺寸就不是一个固定值，而是可以根据需要进行定制。再看一段scss代码实例：

@mixin setborder($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { 
  @include setborder(blue, 2px); 
}

　　如果混合器没带参数，那么可以省略小括号；如果带有参数，必须带有小括号。参数与参数之间用逗号分隔。也可以给混合器的参数设置默认值，看如下scss代码代码实例:

@mixin setborder($color, $width: 2px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { 
  @include setborder(green); 
}
h1 { 
  @include setborder(green, 4px); 
}

　　上面的代码中，设置第二个参数$width默认值是2px，如果没有传递此参数，那么就直接使用默认值。如果传递了此参数，那么新的参数将会覆盖默认参数。传递参数也可以使用键值对的方式，scss代码实例如下:

@mixin setborder($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
h1 { 
  @include setborder($color: green, $width: 4px); 
}

　　参数变量（...）也可以在@include引用混合器的时候，将值列表中的值逐条作为参数引用：

@mixin colorlist($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ccc, #0ff, #fff;
.orignal{
  @include colorlist($values...);
}

 

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