為了有效的維護(hù)和開發(fā)項(xiàng)目，代碼的重復(fù)利用就顯得尤為重要覆享。在Sass中营袜，除了@import和@extend可以使你的代碼更加具有重復(fù)利用性荚板，@mixin指令也同樣能提高你代碼的重復(fù)使用率并簡(jiǎn)化你的代碼。
@extend指令通過繼承從而簡(jiǎn)化了代碼拧抖，但是它也有缺陷之處罚斗，首先是不夠靈活宅楞，其次它還會(huì)將你不需要的其他地方具有相同類名的樣式都繼承過來。
@mixin指令是另一種簡(jiǎn)化代碼的方法距淫。Mixins可以包含任意內(nèi)容且可以傳遞參數(shù)婶希，因此比@extend更加靈活和強(qiáng)大喻杈。
定義Mixins
通過@mixin加名稱的方式就可以定義一個(gè)Mixins模塊，在模塊內(nèi)你可以添加任何你想重復(fù)使用的樣式缴啡。
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
由于歷史原因瓷们，連字符和下劃線被認(rèn)為是相同的秒咐，也就是說 @mixin button-large { }和 @mixin button_large { } 是一樣的碘裕。
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
使用@mixin指令
你可以通過@include來調(diào)用具有相同名稱的mixin模塊帮孔。
.button-green {
@include button;
background-color: green;
}
比如通過@include調(diào)用我之前創(chuàng)建名為button的mixin模塊，那么解析后的CSS就如下所示：
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background-color: green;
}
正如你所預(yù)期的那樣惊豺，@include被名為button的混合模塊內(nèi)的樣式所取代禽作。同時(shí)我在.button-green中添加的background-color樣式依然保留著旷偿。
在mixin模塊的定義中還可以包含其他的mixin。比如：
@mixin button-blue {
@include button;
@include link;
}
所以你可以通過以包含多種簡(jiǎn)單mixin模塊的方式創(chuàng)建較為復(fù)雜的mixin模塊幢妄。
當(dāng)Mixins模塊包含選擇器和規(guī)則集茫负，也就是mixins包含的內(nèi)容本身就是有效的CSS樣式時(shí)，他們就可以在其他規(guī)則集外被調(diào)用潮尝。比如本文之前創(chuàng)建的名為link的mixin模塊：
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
之后我們可以直接調(diào)用這個(gè)模塊饿序，即使不在一個(gè)選擇器內(nèi)原探。
@include link;
這段代碼將會(huì)被解析為：
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
之所以能這樣調(diào)用是因?yàn)檫@個(gè)mixin模塊內(nèi)既包含了選擇器也包含了樣式，如果沒有選擇器徒蟆，那么編譯后將不會(huì)有內(nèi)容顯示型型。比如我們?cè)谶x擇器外直接調(diào)用button這個(gè)mixin模塊，那么將不會(huì)有東西被編譯戚哎。
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
@include button;
不會(huì)被編譯是因?yàn)槟愕臉邮經(jīng)]有被應(yīng)用到任何元素上。
參數(shù)的使用
Mixins可以接收和使用參數(shù)丈冬，這使得它比 @extend更加強(qiáng)大和靈活甘畅。我更新了之前的button模塊疏唾，增加了名為background的參數(shù)并將其傳遞給模塊。
@mixin button($background) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
注意到參數(shù)被設(shè)置為一個(gè)變量并成為backround屬性的值喉童。如果我們想創(chuàng)建一個(gè)綠色的按鈕顿天，那么就可以使用以下代碼：
.button-green {
@include button(green);
}
當(dāng)Sass被編譯時(shí)，值green就被傳遞給@mixin并成為變量$backround的值咽白。編譯后的代碼如下：
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green;
}
你還可以在@mixin和@include中傳遞多個(gè)參數(shù)鸟缕，參數(shù)間用逗號(hào)隔開。比如：
@mixin button($background, $color) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: $color;
background: $background;
}
.button-green {
@include button(green, #fff);
}
給參數(shù)設(shè)置默認(rèn)值
你可能會(huì)好奇如果在定義mixin時(shí)定義了參數(shù)授段，但是在@include調(diào)用時(shí)沒有傳遞參數(shù)會(huì)發(fā)生什么莫绣。這種情況下你會(huì)收到一個(gè)編譯錯(cuò)誤的提示。同時(shí)我相信這種情況一定不是你想看到的。你可以通過在mixin中定義參數(shù)的時(shí)候給它設(shè)置一個(gè)默認(rèn)值掩宜，從而來避免這種錯(cuò)誤么翰。
@mixin button($background: green) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
現(xiàn)在如果你在調(diào)用的時(shí)候忘記傳遞參數(shù)值
.button-green {
@include button;
}
你的代碼將會(huì)使用你設(shè)置的參數(shù)默認(rèn)值來解析，在這個(gè)例子中也就是green這個(gè)值檐迟。
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green;
}
當(dāng)然，你也可以通過提供一個(gè)參數(shù)值來覆蓋這個(gè)默認(rèn)值溶其。
.button-blue {
@include button(blue);
}
這時(shí)將會(huì)使用你提供的值來編譯代碼
.button-blue {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: blue;
}
關(guān)鍵字參數(shù)
為了幫助你的代碼更加容易理解敦间，你可以在傳遞值給mixin時(shí)將參數(shù)名稱和參數(shù)值一并傳遞過去廓块。
.button-green {
@include button($background: green, $color: #fff);
}
關(guān)鍵字參數(shù)會(huì)額外增加一些代碼，但是這會(huì)使得你的@include更加容易理解昔汉。比如拴清，上面那段代碼就比下面這段代碼更加容易理解，因?yàn)樯厦娴拇a明確指出了green和#fff分別是什么嫡秕。
.button-green {
@include button(green, #fff);
}
雖然選擇器的名稱給了我們一些線索苹威，可以大概推斷出第一個(gè)參數(shù)代表什么牙甫，但是對(duì)于第二個(gè)參數(shù)卻沒有任何提示作用，而且一年后你很可能不會(huì)再記得這個(gè)參數(shù)的含義窟哺。
一起傳遞關(guān)鍵字名稱和值也被稱為命名參數(shù)且轨，你也可以以任意順序傳遞命名參數(shù)。下面兩種傳遞方式解析后會(huì)得到相同的結(jié)果泳挥。
.button-green {
@include button($background: green, $color: #fff);
}
.button-green {
@include button($color: #fff, $background: green);
}
