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...);
}