SCSS @mixin

如果存在大段可以重複使用的css程式碼，使用混合器可以方便的引用它。

混合器使用@mixin命令標識，程式碼例項如下：

[Scss] 純文字檢視 複製程式碼
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

上面的就是一個關於圓角功能的混合器，我們可以使用@include來引用這個混合器。

程式碼例項如下：

[Scss] 純文字檢視 複製程式碼
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

編譯後的css程式碼如下：

[CSS] 純文字檢視 複製程式碼
notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

@include會將混合器的css程式碼插入到指定的位置。

也可以在最外層引用混合器，沒必要非要在規則之內引用:

[Scss] 純文字檢視 複製程式碼
@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
a {
  color: blue;
  background-color: red;
}

混合器中還可以引用其他混合器，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@mixin child-corners {
  border-radius: 5px;
}
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  @include child-corners;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

前面介紹@mixin混合器的基本用法，混合器還可以傳遞引數，具體參閱SCSS @mixin傳參一章節。