上一篇詳述了Sass如何嵌套亮瓷、導(dǎo)入和注釋這3個(gè)基本方式來保持條理性和可讀性飞傀，這一篇更進(jìn)一步地闡述sass保持樣式復(fù)用和簡潔的方式——混合器和選擇器繼承——這兩種方式都能復(fù)用樣式啄枕，使用它們也不難萌抵，但一定要注意什么時(shí)候該用什么稿饰。
零. 混合器——樣式層上復(fù)用
當(dāng)你需要一直復(fù)用大段樣式的時(shí)候缰儿，可以考慮下混合器畦粮。
1. 基本用法
混合器使用@mixin標(biāo)識(shí)符定義，然后通過@include引入乖阵，簡單的說就是用@mixin定義一個(gè)混合器宣赔，它具有一個(gè)名字和一堆包含在花括號(hào)中的規(guī)則，用@include引入這個(gè)混合器（通過混合器的名字）瞪浸，混合器中的樣式規(guī)則就會(huì)被提取到調(diào)用@include的地方儒将。
此外，混合器中也可以包含CSS規(guī)則对蒲，可以包含選擇器和選擇器中的規(guī)則钩蚊，甚至可以用父選擇器標(biāo)識(shí)符&。
@mixin rounded-corners{
-moz-border-radius:5px;
-webkit-border-redius:5px;
border-radius:5px;
}
.notice{
background-color:green;
border:2px solid #0a0;
@include rounded-corners;
}
//導(dǎo)出的css如下
.notice{
background-color:green;
border:2px solid #0a0;
-moz-border-radius:5px;
-webkit-border-redius:5px;
border-radius:5px;
}
2. 可以給混合器傳參
混合器復(fù)用樣式的時(shí)候蹈矮，可以通過傳參改變混合器中的具體屬性值砰逻，和function很像。
混合器定義時(shí)泛鸟，參數(shù)名稱必須以變量名形式指定蝠咆，此外，可選的是北滥，參數(shù)可以有默認(rèn)值刚操，只需要在參數(shù)名后面以冒號(hào):分隔后寫上默認(rèn)屬性值，如果你了解各類編程語言函數(shù)的默認(rèn)參數(shù)值碑韵，這應(yīng)該不會(huì)陌生赡茸。
引入含有參數(shù)的選擇器時(shí)，有兩種傳入?yún)?shù)的形式祝闻，一種是僅僅傳入?yún)?shù)值占卧，這要求傳入?yún)?shù)值的順序和混合器定義的參數(shù)順序一致遗菠，另一種則是通過$name:value的形式指定傳入?yún)?shù)的名字和值，這就不要求順序华蜒。
以下代碼定義了一個(gè)有3個(gè)參數(shù)的選擇器來設(shè)置一個(gè)鏈接各個(gè)狀態(tài)的顏色樣式辙纬，其中常規(guī)樣式的顏色$normal有一個(gè)默認(rèn)值#233，另外兩個(gè)參數(shù)沒有默認(rèn)值：
@mixin link-col($hover, $visited, $normal:#233){
color:$normal;
&:hover { color:$hover; }
&:visited { color:$visited; }
}
當(dāng)引入這個(gè)混合器的時(shí)候叭喜，可以有以下兩種方式引入：
//可以這么引入贺拣，因?yàn)樽詈笠粋€(gè)參數(shù)默認(rèn)，可以不傳入
a{
@include link-col(red, gray);
}
//也可以這樣捂蕴，就不用管順序
a{
@include link-col($visited:gray, $hover:red);
}
3. 混合器的使用場景——注意和類的區(qū)別
如果發(fā)現(xiàn)一直在不停復(fù)用一段樣式譬涡，應(yīng)該考慮把這段樣式構(gòu)造成一個(gè)混合器，尤其是它本身可能是一組有意義的樣式組合啥辨，并且考慮進(jìn)參數(shù)的設(shè)置涡匀，讓混合器更加智能。
判斷一組選擇器是否應(yīng)該組合在一起組成一個(gè)混合器溉知，一條經(jīng)驗(yàn)法則：能否為這個(gè)混合器想出一個(gè)能概括它的好名字陨瘩。如果能想出一個(gè)短名字來描述這幾條樣式組合的作用，那么往往能構(gòu)造出一個(gè)合適的混合器级乍。
混合器和CSS類很像舌劳，css類也可以復(fù)用樣式，一段樣式給一個(gè)類玫荣，然后那里需要這一段樣式去修飾甚淡，就在哪里添加這個(gè)類。
區(qū)別在于崇决，類是在HTML中運(yùn)用的材诽，混合器是在樣式表中使用的底挫。這意味著恒傻，“類”具有語義化的含義，而混合器僅僅是有關(guān)樣式的建邓，僅僅是描述展示出來是什么樣子的盈厘。
能區(qū)分這兩者微妙的區(qū)別，并且有意地去選擇更合適的方式去復(fù)用樣式官边，這能讓你的代碼保持可讀性和可維護(hù)性沸手。誠然，現(xiàn)在很多流行框架注簿，依舊在用類去復(fù)用樣式契吉，但是語義和樣式的解耦絕對(duì)是趨勢。
一. 選擇器繼承——語義化關(guān)系上復(fù)用樣式
剛描述完混合器和類的差別诡渴，在于“語義”和“展示樣式”捐晶，又突然到了建立在語義化關(guān)系上復(fù)用樣式的選擇器繼承，似乎有點(diǎn)繞，為什么不用類而要用選擇器繼承呢惑灵？
實(shí)際上山上，選擇器繼承最常用的場景就是和類一起工作的。
1. 基本用法
選擇器繼承英支，用@extend去繼承一個(gè)選擇器定義的所有樣式佩憾。以下代碼，.seriousError將會(huì)繼承.error定義的所有樣式干花。
.error{
border: 1px red;
background-color: #fdd;
}
.seriousError{
@extend .error;
border-width: 3px;
}
//輸出的CSS代碼是這樣的
.error, .seriousError{
border: 1px red;
background-color: #fdd;
}
.seriousError{
border-width: 3px;
}
是的妄帘，平時(shí)我們完全可以寫輸出的純CSS代碼，多寫一個(gè)選擇器名字和多寫一行@extend命令池凄，我們覺得差不多寄摆。
但是，在上面的例子中修赞，.seriousError不僅會(huì)繼承.error自身的所有樣式（就像上面的那樣）婶恼，任何和.error有關(guān)的組合選擇器樣式也會(huì)被.seriousError以組合選擇器的形式繼承。
比如柏副，在上面的樣式代碼是這樣的：
.error{
border: 1px red;
background-color: #fdd;
}
.seriousError{
@extend .error;
border-width: 3px;
}
.error a{
color:red;
font-weight:bold;
}
h1.error{
font-size:1.3em;
}
//輸出的CSS是這樣的勾邦，注意看下面的選擇器
.error, .seriousError{
border: 1px red;
background-color: #fdd;
}
.seriousError{
border-width: 3px;
}
.error a, .seriousError a{
color:red;
font-weight:bold;
}
h1.error, h1.seriousError{
font-size:1.3em;
}
這個(gè)時(shí)候，如果我們不借助Sass的選擇器繼承割择，而用純CSS來寫眷篇，是不是就會(huì)有一些繁瑣了。
我們再來想一下這幾段代碼的含義：我們描述了一個(gè).error類來整體修飾錯(cuò)誤提示都應(yīng)該有的樣式荔泳，然后.seriousError是.error類的細(xì)化蕉饼，描述了一個(gè)嚴(yán)重的錯(cuò)誤應(yīng)該有的進(jìn)一步的樣式。所以.seriousError應(yīng)該有.error相關(guān)的所有樣式玛歌，而這就是選擇器繼承幫助我們做的事昧港。
2. 繼承背后的基本實(shí)現(xiàn)思路
@extend背后最基本的想法是，如果.seriousError繼承了.error支子，那么樣式表中的任何一處.error選擇器都會(huì)用.error, .seriousError這一選擇器組進(jìn)行替換和打開创肥。
3. 繼承的使用場景
繼承是建立在語義化的關(guān)系上的，當(dāng)一個(gè)元素?fù)碛械念惐砻魉菍儆诹硪粋€(gè)類時(shí)（是另一個(gè)類的細(xì)化時(shí)）值朋，在這種情況下需要復(fù)用樣式時(shí)使用叹侄，它的本質(zhì)作用還是樣式復(fù)用。
它和混合器相比昨登，繼承生成的代碼量會(huì)相對(duì)較少趾代，因?yàn)槔^承僅僅重復(fù)選擇器，而混合器是重復(fù)一段樣式丰辣。
另外撒强，可以看到丈甸，一般它和類一起協(xié)同工作，當(dāng)你在構(gòu)建一些有關(guān)系的類時(shí)尿褪，在寫這些具有層級(jí)關(guān)系的類的樣式的時(shí)候睦擂，選擇器繼承可以幫你嚴(yán)謹(jǐn)?shù)赝瓿赡承邮降膹?fù)用，無論是這個(gè)選擇器本身杖玲，還是隱藏在其他復(fù)雜選擇器中的目標(biāo)選擇器顿仇。
4. 繼承的高級(jí)用法
既然這被稱為選擇器繼承，不是“類”繼承摆马，那么必然繼承是可以針對(duì)類之外的選擇器使用的臼闻，只是繼承類是最常用的使用場景。
還有一種場景是囤采，繼承一個(gè)HTML元素的樣式述呐，如定一個(gè).disabled類，樣式修飾讓它看上去像一個(gè)灰掉的鏈接蕉毯，通過繼承a這一元素實(shí)現(xiàn)：
.disabled{
color: gray;
@extend a;
}
還有一些關(guān)于復(fù)雜選擇器的繼承規(guī)則：
- 如果繼承了一個(gè)復(fù)雜的選擇器乓搬，那么只會(huì)繼承這個(gè)復(fù)雜選擇器命中的樣式， 比如
.seriousError @extend .important.error代虾，那么被繼承的.important.error被看做一個(gè)整體进肯，單獨(dú)的.important或者.error是不會(huì)被繼承的； - 如果一個(gè)選擇器序列繼承了另一個(gè)選擇器棉磨，那么只會(huì)完全命中序列選擇器的才會(huì)繼承江掩，比如
(#main .seriousError) @extend .error（最好不要這么做），那么前者的#main .seriousError也被看做一個(gè)整體乘瓤，只有完全命中這個(gè)選擇器的才會(huì)繼承环形； - 以逗號(hào)分隔的選擇器序列是不能被繼承的，因?yàn)檫@和繼承其中任何一個(gè)選擇器效果一樣衙傀。
5. 使用繼承時(shí)注意后代選擇器
可以放心地繼承有后代選擇器修飾的選擇器抬吟，但不用用后代選擇器去繼承別的選擇器。即放心地用.serious { @extend (.main .error) }差油，但是不要用.something .serious { @exten .error }拗军。
為什么任洞，因?yàn)椴贿@么做可能會(huì)導(dǎo)致繼承迅速變復(fù)雜蓄喇，sass可能會(huì)遺漏一些情況，考慮：
.foo .bar { @extend .baz; }
.bip .baz { a:b; }
當(dāng)下面那條規(guī)則應(yīng)用到.foo .bar時(shí)交掏，有3種情況:
<div class="foo">
<div class="bip">
<div class="bar">...</div>
</div>
</div>
<div class="bip">
<div class="foo">
<div class="bar">...</div>
</div>
</div>
<div class="bip foo">
<div class="bar">...</div>
</div>
所以sass必須要生成3種組合選擇器才能覆蓋這3種情況妆偏，但遺憾的是，sass并不總是會(huì)生成所有情況盅弛，另外钱骂，這樣做叔锐，選擇器的個(gè)數(shù)會(huì)迅速增加，所以最好的方式是不要這么用见秽。
三. 小結(jié)
Sass保持樣式復(fù)用和簡潔的兩個(gè)方式愉烙，一是混合器，混合器主要用于樣式展示層的復(fù)用解取，可以給混合器傳參從而在復(fù)用代碼的同時(shí)保持靈活性步责，二是選擇器繼承，一般和類一起使用禀苦，主要用于建立在語義化關(guān)系上的樣式復(fù)用蔓肯，注意繼承可能引發(fā)的問題。
