SCSS @mixin傳參

關於混合器的基本用法可以參閱SCSS @mixin一章節。

混合器一個很重要特性就是可以傳遞引數，可以根據不同場景來定製css程式碼的複用。

極大提高了混合器的適用性，看如下程式碼例項：

[Scss] 純文字檢視 複製程式碼
@mixin makeradius($radius) {
  border-radius: $radius;
}
antTest{
  background-color: blue;
  border: 4px solid #ccc;
  @include makeradius(8px);
}

編譯生成的css程式碼如下：

[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引用混合器的時候，將值列表中的值逐條作為引數引用：

[Scss] 純文字檢視 複製程式碼
@mixin colorlist($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ccc, #0ff, #fff;
.orignal{
  @include colorlist($values...);
}

這已經都有類似於ES2015中的剩餘引數的味道。