Sass mixin和extend的選擇

mixins允許我們在專案中復用樣式片段，可以傳遞引數這個特性使得它們非常靈活，強大。同樣，我們也可以使用@extend命令讓乙個選擇器繼承其它選擇器去復用樣式片段。有的時候mixin和extend好像做了同樣的事情，那我們應該選擇哪乙個呢？

除了傳遞引數，也可以直接傳遞乙個樣式片段給mixin。在mixin中，新增@content;語句，然後傳遞的樣式片段就會代替@content;出現在相應的位置。

@mixin button 
.button-green 
}

.button-green中呼叫了mixin。@include指令傳遞了乙個將背景色設定為綠色的css片段，然後這個片段就會代替@content語句出現在mixin中相應的位置。

這段sass被編譯成：

.button-green

當乙個內容片段傳進mixin的時候，它的作用域是在定義它的地方，而不是在mixin裡面。也就是說，傳進去的內容片段不能使用在mixin中定義的變數。

$color: green;
@mixin button($color: #fff) 
.button-green   
}

在這個例子中，在最外層和mixin的引數中都有定義變數$color。這兩個變數分別有不同的色值。

在mixin中，$color變數的值是#fff。在傳遞給.button-green的內容片段中，$color將會使用在最外層定義的green值。

所以，上面的sass會被編譯成下面這段css

.button-green

樣式片段沒有重複，這就是dry

1. 使用@extend產生 dry css風格的**。但是@mixin就不能產生dry式的**。

2.@extend會增加選擇器之間的聯絡，然後把他們堆在一起。你正在為一些相關的元素設定樣式，就拿一組按鈕來說，使用@extend讓他們共享樣式看起來合情合理。但是如果這些被復用的樣式片段並不僅僅侷限於相關的元素，那麼使用@mixin或許更好。

3.@mixin主要的優勢就是它能夠接受引數。如果想傳遞引數，你會很自然地選擇@mixin而不是@extend。

如果沒有任何引數，使用@extend來創造dry應該是個不錯的選擇。不過要注意的是，使用gzip壓縮過的檔案可能會破壞**中的dry。

4. 在大作數情況下@mixin會比@extend更好，但是它們倆都有自己的一席之地。當樣式和選擇器之間的關係在某些方面比較緊密的時候，使用@extend。除此之外，你可以使用@mixin在任何地方。