sass筆記-3|Sass基礎語法之樣式複用和保持簡潔

上一篇詳述了Sass如何嵌套、導入和註釋這3個基本方式來保持條理性和可讀性，這一篇更進一步地闡述sass保持樣式複用和簡潔的方式——混合器和選擇器繼承——這兩種方式都能複用樣式，使用它們也不難，但必定要注意何時該用什麼。

零. 混合器——樣式層上覆用

當你須要一直複用大段樣式的時候，能夠考慮下混合器。

1. 基本用法

混合器使用@mixin標識符定義，而後經過@include引入，簡單的說就是用@mixin定義一個混合器，它具備一個名字和一堆包含在花括號中的規則，用@include引入這個混合器（經過混合器的名字），混合器中的樣式規則就會被提取到調用@include的地方。

此外，混合器中也能夠包含CSS規則，能夠包含選擇器和選擇器中的規則，甚至能夠用父選擇器標識符&。

@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;
}

//導出的css以下
.notice{
	background-color:green;
	border:2px solid #0a0;
	-moz-border-radius:5px;
	-webkit-border-redius:5px;
	border-radius:5px;
}

2. 能夠給混合器傳參

混合器複用樣式的時候，能夠經過傳參改變混合器中的具體屬性值，和function很像。

混合器定義時，參數名稱必須以變量名形式指定，此外，可選的是，參數能夠有默認值，只須要在參數名後面以冒號:分隔後寫上默認屬性值，若是你瞭解各種編程語言函數的默認參數值，這應該不會陌生。

引入含有參數的選擇器時，有兩種傳入參數的形式，一種是僅僅傳入參數值，這要求傳入參數值的順序和混合器定義的參數順序一致，另外一種則是經過$name:value的形式指定傳入參數的名字和值，這就不要求順序。

如下代碼定義了一個有3個參數的選擇器來設置一個連接各個狀態的顏色樣式，其中常規樣式的顏色$normal有一個默認值#233，另外兩個參數沒有默認值：

@mixin link-col($hover, $visited, $normal:#233){
	color:$normal;
	&:hover { color:$hover; }
	&:visited { color:$visited; }
}

當引入這個混合器的時候，能夠有如下兩種方式引入：

//能夠這麼引入，由於最後一個參數默認，能夠不傳入
a{
	@include link-col(red, gray);
}
//也能夠這樣，就不用管順序
a{
	@include link-col($visited:gray, $hover:red);
}

3. 混合器的使用場景——注意和類的區別

若是發現一直在不停複用一段樣式，應該考慮把這段樣式構形成一個混合器，尤爲是它自己多是一組有意義的樣式組合，而且考慮進參數的設置，讓混合器更加智能。

判斷一組選擇器是否應該組合在一塊兒組成一個混合器，一條經驗法則：**可否爲這個混合器想出一個能歸納它的好名字。**若是能想出一個短名字來描述這幾條樣式組合的做用，那麼每每能構造出一個合適的混合器。

混合器和CSS類很像，css類也能夠複用樣式，一段樣式給一個類，而後那裏須要這一段樣式去修飾，就在哪裏添加這個類。

區別在於，類是在HTML中運用的，混合器是在樣式表中使用的。這意味着，「類」具備語義化的含義，而混合器僅僅是有關樣式的，僅僅是描述展現出來是什麼樣子的。

能區分這二者微妙的區別，而且有意地去選擇更合適的方式去複用樣式，這能讓你的代碼保持可讀性和可維護性。誠然，如今不少流行框架，依舊在用類去複用樣式，可是語義和樣式的解耦絕對是趨勢。

一. 選擇器繼承——語義化關係上覆用樣式

剛描述完混合器和類的差異，在於「語義」和「展現樣式」，又忽然到了創建在語義化關係上覆用樣式的選擇器繼承，彷佛有點繞，爲何不用類而要用選擇器繼承呢？

實際上，選擇器繼承最經常使用的場景就是和類一塊兒工做的。

1. 基本用法

選擇器繼承，用@extend去繼承一個選擇器定義的全部樣式。如下代碼，.seriousError將會繼承.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;
}

是的，平時咱們徹底能夠寫輸出的純CSS代碼，多寫一個選擇器名字和多寫一行@extend命令，咱們以爲差很少。

可是，在上面的例子中，.seriousError不只會繼承.error自身的全部樣式（就像上面的那樣），任何和.error有關的組合選擇器樣式也會被.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;
}

這個時候，若是咱們不借助Sass的選擇器繼承，而用純CSS來寫，是否是就會有一些繁瑣了。

咱們再來想一下這幾段代碼的含義：咱們描述了一個.error類來總體修飾錯誤提示都應該有的樣式，而後.seriousError是.error類的細化，描述了一個嚴重的錯誤應該有的進一步的樣式。因此.seriousError應該有.error相關的全部樣式，而這就是選擇器繼承幫助咱們作的事。

2. 繼承背後的基本實現思路

@extend背後最基本的想法是，若是.seriousError繼承了.error，那麼樣式表中的任何一處.error選擇器都會用.error, .seriousError這一選擇器組進行替換和打開。

3. 繼承的使用場景

繼承是創建在語義化的關係上的，當一個元素擁有的類代表它是屬於另外一個類時（是另外一個類的細化時），在這種狀況下須要複用樣式時使用，它的本質做用仍是樣式複用。

它和混合器相比，繼承生成的代碼量會相對較少，由於繼承僅僅重複選擇器，而混合器是重複一段樣式。

另外，能夠看到，通常它和類一塊兒協同工做，當你在構建一些有關係的類時，在寫這些具備層級關係的類的樣式的時候，選擇器繼承能夠幫你嚴謹地完成某些樣式的複用，不管是這個選擇器自己，仍是隱藏在其餘複雜選擇器中的目標選擇器。

4. 繼承的高級用法

既然這被稱爲選擇器繼承，不是「類」繼承，那麼必然繼承是能夠針對類以外的選擇器使用的，只是繼承類是最經常使用的使用場景。

還有一種場景是，繼承一個HTML元素的樣式，如定一個.disabled類，樣式修飾讓它看上去像一個灰掉的連接，經過繼承a這一元素實現：

.disabled{
	color: gray;
	@extend a;
}

還有一些關於複雜選擇器的繼承規則：

1. 若是繼承了一個複雜的選擇器，那麼只會繼承這個複雜選擇器命中的樣式， 好比.seriousError @extend .important.error，那麼被繼承的.important.error被看作一個總體，單獨的.important或者.error是不會被繼承的；
2. 若是一個選擇器序列繼承了另外一個選擇器，那麼只會徹底命中序列選擇器的纔會繼承，好比(#main .seriousError) @extend .error（最好不要這麼作），那麼前者的#main .seriousError也被看作一個總體，只有徹底命中這個選擇器的纔會繼承；
3. 以逗號分隔的選擇器序列是不能被繼承的，由於這和繼承其中任何一個選擇器效果同樣。

5. 使用繼承時注意後代選擇器

能夠放心地繼承有後代選擇器修飾的選擇器，但不用用後代選擇器去繼承別的選擇器。即放心地用.serious { @extend (.main .error) }，可是不要用.something .serious { @exten .error }。

爲何，由於不這麼作可能會致使繼承迅速變複雜，sass可能會遺漏一些狀況，考慮：

.foo .bar { @extend .baz; }
.bip .baz { a:b; }

當下面那條規則應用到.foo .bar時，有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並不老是會生成全部狀況，另外，這樣作，選擇器的個數會迅速增長，因此最好的方式是不要這麼用。

三. 小結

Sass保持樣式複用和簡潔的兩個方式，一是混合器，混合器主要用於樣式展現層的複用，能夠給混合器傳參從而在複用代碼的同時保持靈活性，二是選擇器繼承，通常和類一塊兒使用，主要用於創建在語義化關係上的樣式複用，注意繼承可能引起的問題。