1.背景

如果你的網站中有幾處樣式相同的話,比如一些顏色和字型,那麼可以使用變數來處理這個問題.但是當你的樣式越來越多,需要複用大段的樣式,獨立變數就顯得有點吃力了,這時候你可以通過sass中的混合器來進行復用(當然也可以用佔位符或者繼承,下面會討論這三者之間的區別).

2.混合器@mixin

特點:可傳參 缺點:如果在樣式檔案中呼叫同一個混合巨集，會產生多個對應的樣式程式碼，造成程式碼的冗餘.

不傳引數使用方法:

@mixin cont{
    color: red;
    font-size: 14px;
}

呼叫:

body{
    @include cont;
}

這個看上去好像跟佔位符的用法一樣,是的,兩者幾乎沒有很大區別,唯一不同的是當一個頁面中多次呼叫的話,@mixin不會將樣式相同的程式碼進行合併,而使用佔位符多次呼叫的話則會處理這個問題.下面先進行程式碼演示這個問題的存在,再來接著討論@mixin混合器.

scss:

@mixin my-color{
    color: red;
}
.div1{
    @include my-color;
}

.div2{
    @include my-color;
}

生成之後的css:

/* line 5, ../sass/mixin2.scss */
.div1 {
  color: red;
}

/* line 9, ../sass/mixin2.scss */
.div2 {
  color: red;
}

但是我想要的結果是這樣的:

/* line 13, ../sass/mixin2.scss */
.div1, .div2 {
  color: green;
}
 

而使用佔位符後:

%my-color{
    color: green;
}

.div3{
    @extend %my-color;
}

.div4{
    @extend %my-color;
}

生成程式碼:

/* line 13, ../sass/mixin2.scss */
.div3, .div4 {
  color: green;
}

相比之下顯然是這個程式碼比較友好一點.
混合器@mixin好處在於它能夠傳引數進行操作...

多值引數:

呼叫時可不傳引數,則使用預設值,也可直接傳入值,如@include傳入引數的個數小於@mixin定義引數的個數，則按照順序表示，後面不足的使用預設值，如不足的沒有預設值則報錯。除此之外還可以選擇性的傳入引數，使用引數名與值同時傳入。

@mixin cont($color:red,$fontSize:14px){
    color: $color;
    font-size: $fontSize;
}

body{
    @include cont();
}

生成程式碼:

/* line 8, ../sass/mixin.scss */
body {
  color: red;
  font-size: 14px;
}

多組引數:
如果一個引數可以有多組值，如box-shadow、transition等，那麼引數則需要在變數後加三個點表示，如$variables...。
scss:

@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

css:

.box {
  border: 1px solid #ccc;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
}

如果不寫這三個點，就會報錯：混合器只帶一個引數，卻傳入了3個引數

以上小結:當大量複用樣式中需要使用到變數的時候可以使用混合器@mixin進行重寫,例如圓角的相容性,處理瀏覽器字首等問題,否則使用繼承@extend進行重寫.如有不足,希望大神可以留言指點一丟丟,有問題也可以一起討論.