前面我們已經知道sass中的變數了。

但是變數能記錄的畢竟只是一個值，頂多把一個屬性的所有值全部記錄進去。

比如這樣：

這樣固然可以讓box這個選擇器很輕鬆地獲得一個邊框樣式。

但是如果我有大量公用的樣式呢？比如文字顏色，字型大小這些東西其實都可以統一起來。

那這時候如果我們再一條一條的去存變數，然後再去使用的話就不太方便了。

混合（Mixin）就是用來解決這個問題的，它可以把一整段程式碼打包，然後像一個變數一樣在其他地方使用。

今天，我們們就來詳細解讀一下Sass的混合功能。

---

Sass的混合操作

混合在官方的解釋是這樣的：

混合指令（Mixin）用於定義可重複使用的樣式，避免了使用無語意的 class。

混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則。

甚至通過引數功能引入變數，輸出多樣化的樣式。

來看案例：

考慮圖中按鈕的實現，我們先用以前的方法來寫：

可以看到，以上程式碼中雖然我們大量用了變數。

但是兩個選擇器裡面內容的相似度依然非常高。

大家可能在想：

明明border-radius、font、text-align都可以用變數來定義，但是仔細想想，這樣的程式碼真的是我們需要的麼？

稍微複雜點就全都是變數？

這恐怕會越寫越亂吧！

所以面對這樣的程式碼，我們就需要用到混合了

來看看混合的“神”操作

現在我們來看看用混合怎麼寫

可以看到這程式碼一下就變得很清晰了。我們來看看這段程式碼裡發生了什麼事情：

第一段，利用@mixin指令建立了一個“超級變數”：btn。

而這個“超級變數”是一個集合，集合裡面可以寫所有的css規則。

然後通過@include指令引用這個“超級變數”。

這樣我們就做到了把幾個相似選擇器中重複的程式碼提取出來，達到了程式碼的高複用性。

而sass把這個定義“超級變數”, 和引用“超級變數”叫做混合。

當然在這之前我們可能會考慮寫一個公用的class。

然後在需要的地方去引入這個class就可以了。

但是那樣的程式碼畢竟可維護性不高，效能也是肯定不如sass的，而且sass的混合還有更加強大的地方。

那怎麼辦呢？接著往下看。

混合中的引數

在上面這段程式碼中，雖然我已經把重複的程式碼全部都提取出去了，但是剩下的兩個屬性：

border和padding兩個選擇器之間的差別也不太大。

那有沒有可能把這兩個屬性也提取出來呢？

是可以的：

可以看到這段程式碼裡，編譯過後的程式碼和之前的程式碼是一樣的。

但是sass程式碼又更加精簡一些了 ：

在定義混合樣式 btn 的時候，在後面加上了一個括號，括號裡其實就是一個變數名稱。

但是這個變數並沒有值。然後可以看到這個變數在下面用到了 ：

border: 1px solid $color;

在這裡用到了這個變數。

那麼也就代表了：

在這個混合樣式沒有被呼叫的時候，這個border裡面的$color是得不到值的。

只有當呼叫這個混合樣式的時候，給它傳入一個值，這時候border才能得到傳入進來的值。

然後把傳入進來的值替換到border這條樣式上去。

再把自己作為一個整體替換到引入混合樣式的地方。

這個過程看起來可能會有點複雜，我們簡單點來說吧：

我們把這整個過程當做是去存物處取東西。

不同的客戶拿著不同的鑰匙來，那麼取走的東西肯定也是不一樣的。

但是存物處突然搞活動了，所有客戶來取東西，都送一盒雞蛋！

那麼這時候我們整個過程就比較好理解了；

不同的客戶（.btnGray、.btnBlue）拿著不同的鑰匙（#899、#4395ff）來btn這個存物處這裡取東西。

那麼btn會根據不同的鑰匙取出不同的東西（.btnGray得到的是：

border: 1px solid #899

而.btnBlue得到的是：

border: 1px solid #4395ff）

然後附贈一盒雞蛋（公共樣式）

最後.btnGray和.btnBlue都得到了公共樣式，並且分別得到了顏色不一樣的邊框樣式~

再來看上面這段程式碼：

從上到下解析，從1~7行一開始是不解析的。

因為在這期間它作為一個混合樣式還沒有被呼叫。所以不會解析

到第10行的時候看到了一個 @include指令，並且後面跟著的名稱是 btn .

那這時候sass會去找有沒有名字叫做btn的混合樣式：

哎，貌似剛才經過的地方有這麼個傢伙，感覺有點眼熟，然後立馬把1~7行的btn抓過來了：這裡要呼叫你了！

再往後一看，哎喲，居然還需要鑰匙，恰好第10行程式碼 btn的後面的括號裡就有一個鑰匙。

於是乎1~7行在這一瞬間就被替換成了這樣：

然後再把這一段程式碼複製到第10行這個地方，於是選擇器.btnGray就獲得了完整的程式碼。

替換完成了之後 1~7行就立刻又恢復原樣了。

程式碼繼續往下走，走到第15行的時候，哎，這個地方還需要那哥們，於是btn又被拎過來了…

重複剛才的動作。

要注意的點：

定義了引數的混合樣式，必須傳入引數，否則會報錯。

遇到多個引數怎麼辦？

到這裡，混合這個東西似乎就比較清楚了。

不過細心的同學可能發現了，貌似兩個選擇器裡的padding也可以這樣操作呀？

是的，混合樣式後面的的變數其實叫做引數。

引數用於給混合指令中的樣式設定變數，並且賦值使用。

在定義混合指令的時候，按照變數的格式，通過逗號分隔，將引數寫進圓括號裡。

引用指令時，按照引數的順序，再將所賦的值對應寫進括號。

要注意的點：

多個引數在呼叫傳值時，只能按照定義的順序傳入，中間不可缺少引數；

如果想要打亂順序，則可以這樣寫：

如何設定引數的預設值？

甚至混合指令也可以使用給變數賦值的方法給引數設定預設值。

然後，當這個指令被引用的時候，如果沒有給引數賦值，則自動使用預設值：

這樣的話變數$color 和 $pad 就擁有預設值了，在呼叫的時候。

如果沒有傳入值，那麼這兩個變數將會得到這裡定義的預設值：

要注意的點：

如果定義了多個變數，當只想改變其中一個變數時，可以指定變數名。

比如現在我們的混合樣式已經帶有預設值了，現在我需要讓.btnGray的padding值變成10px

那要怎麼辦呢？

如果我們這樣寫：

這樣無疑是錯誤的，所以我們可以指定其變數名

花錢都買不到的小技巧

在混合樣式裡，可以引入其他混合樣式

可把整個選擇器當做混合樣式的一部分

這在程式碼模組化的時候非常有用~
不確定引數個數的時候，這樣寫