sass筆記-1|Sass是如何幫你又快又好地搞定CSS的

Sass學習筆記持續整理中，開篇不講怎麼安裝，sass是什麼，這些搜索引擎會告訴你，咱們從sass的做用開始講起，知道sass用來幹什麼，有什麼做用，咱們才能相信用sass的好處，而且時時刻刻想着sass的設計思惟——Don't Repeat Yourself。這一篇將闡述Sass如何利用變量、選擇器嵌套、混合器和選擇器繼承來幫咱們又快又好地搞定CSS。

零. Sass的做用是什麼？

Sass的做用是，幫助咱們更快地（又快）寫出具備高可維護性（又好）的CSS代碼。

直白點說就是，用了sass，寫起樣式來，腳步帶風，效率提高，另外一方面，sass在保證你「車速」的同時，還儘可能減小你「翻車」的機率，你的樣式代碼將變得具備更多的條理性，更少的囉嗦重複，修改起來也變得簡單高效，不用ctrl+F查找而後替換全部，因此總結起來就是「又快又好」。

接下來咱們就先來看一下sass是怎麼解決冗餘問題的，涉及到具體的語法，往後再詳細展開。

一. 冗餘有什麼問題？

/*冗餘的樣式表*/
h1#brand {
	color:#1875e7;
}
#sidebar{
	background-color:#1875e7
}
ul.nav{
	float:right;
}
ul.nav li{
	float:left;
}
ul.nav li a{
	color:#111;
}
ul.nav li.current{
	font-weight:bold;
}
#header ul.nav{
	float:right;
}
#header ul.nav li{
	float:left;
	margin-right:10px;
}
... ...

Sass能夠消除樣式表中的冗餘，那麼冗餘有什麼問題，我打字快，我不怕冗餘，是否是這樣？

冗餘的問題在於太妨礙效率，分開來講就是兩個問題：

1. 寫起來費勁，不斷重複寫選擇器，不斷重複寫相同的css規則，不斷重複地寫屬性值（好比某個顏色、某個大小值等）；
2. 改起來要瘋，一旦一個地方的屬性值要改，每每要找到不少處都要改，並且若是是有關聯的屬性，好比某個顏色是根據另外一個顏色值計算獲得的，一旦改前一個顏色，後面的顏色也要改，這個時候由於值不同，並不能簡單的ctrl+F查找去全局替換。

這樣的冗餘問題多了，你的樣式表，你本身都會看着心煩，由於很容易出錯。

二. 複用屬性值——變量

還記得剛學C的時候，算圓周長和麪積，老師說，咱們首先去定義一個常量P=3.14，這樣若是之後要算更精確的，就能夠這裏把「3.14」改爲「3.14159」就能夠了，否則就要去找到算式去一處一處改。

Sass讓咱們的寫樣式也能夠用變量，能夠把任意的屬性值賦給變量，在一個地方（通常是你的樣式表靠前的位置）管理散落在各處的屬性值。

舉個場景，想象一下，你正在寫一套站點主題，包含5個主要顏色，其餘任何元素的顏色都是從其中直接或者計算（間接）獲得，因此這些以「#」開頭的顏色值遍及你的樣式表各個地方，可能運用於某處的span標籤內的文字顏色，可能運用於某處的div的背景，這個時候你想要修改配色嘗試一下，常規地直接在CSS樣式表上更改，你得改瘋，改完還一直懷疑，我是否是漏了哪裏，而用sass只須要在開頭定義顏色變量值的地方，集中更改就能夠了，這樣的更改，兩相比較，效率不是一個量級的。

//這樣是定義變量
$text-color-info:#121212;  
//而後能夠這樣用
.txt{
	color:$text-color-info;
}

sass的變量名規範是這樣的，以「$」開頭，可包括全部可用於CSS類名的字符，包括下劃線和中劃線，並且方便的是，變量名中並不區分中劃線和下劃線，好比$pretty_girl和$pretty-girl是同樣的，沒差。

三. 快速寫出多層次選擇器——嵌套

多層次選擇器的問題在於重複寫選擇器，或者不斷地ctrl+c而後ctrl+v，而後可讀性也不強，尤爲是不按必定次序寫，最後修改起來很不方便，好比把下面的類名"nav"改爲"navg"，就須要改全部的「.nav」選擇器。

ul.nav{
	float:right;
}
ul.nav li{
	float:left;
}
ul.nav li a{
	color:#111;
}

Sass利用選擇器嵌套來幫咱們解決上述問題，若是用嵌套選擇器來寫，上面的幾條CSS會變成這樣：

ul.nav{
	float:right;
	li{
		float:left;
		a{
			color:#111;
		}
	}
}

條理性很清楚（固然條理性和可讀性永遠和程序猿的代碼編寫習慣相關），沒有選擇器的冗餘，修改起來也會很是方便。

四. 複用一段樣式——混合器

不停地要用到一段樣式，這樣的情景也是很常見的，好比咱們要爲警示性的提示信息寫一段樣式：

.danger-note{
	font-size: 10px;
	color: #e22;
}

而後在html文檔裏，當須要警示性的提示時，咱們把類「danger-note」加到某一個標籤上，而後它就有這樣的樣式了，哪裏須要就去哪裏加這個類，這是咱們常規的作法。

那麼，這樣作法有什麼問題呢，這樣的問題在於類名通常具備語義，如何保持語義的同時還能複用代碼？此外，咱們若是在CSS中提煉出某段須要複用的代碼，咱們須要建立一個類選擇器，而後回到html文檔裏，去該去的地方加上這個類。

而Sass是怎麼幫助咱們複用一段樣式的呢？再說回到學C的時候，有個東西叫「宏」，「宏」就是一個佔位的標誌，用一開始定義的內容去替換代碼中的「宏」標誌，其實Sass中的混合器也是差很少的。

咱們能夠這麼去定義一個混合器，以@mixin開頭，後跟一個混合器名字，而後是CSS規則：

@mixin danger-note{
	font-size: 10px;
	color: #e22;
}

而後咱們就能夠用@include隨時複用這一段代碼了：

#notice{
	text-align:center;
	@include danger-note;
}

更強大的是，混合器和變量的結合使用，可使混合器帶參數，用參數來決定使用什麼樣式，amazing，簡直和「函數」同樣。

/*定義混合器*/
@mixin danger-note($col:#e22){
	font-size: 10px;
	color: $col;
}
/*使用混合器*/
#notice{
	text-align:center;
	@include danger-note(#d33);
}

上面的混合器帶了一個參數用於決定顏色值，具備一個默認值#e22，也就是引入混合器不指定參數就用默認值，這裏咱們傳入參數#d33，這樣咱們的顏色最終是d33。

五. 避免重複屬性——選擇器繼承

這多是sass相比於上面的特性中最很差理解的特性了，咱們已經瞭解能夠用混合器來複用一段樣式，但因爲混合器被看作一個「宏」，因此實際上是相同的一段代碼被添加到不一樣的地方了，必然這是會有重複和冗餘的。

@mixin note{
    font-size: 10px;
    text-decoration: underline;
}
.danger-note{
	color:#e22;
	@include note;
}
.info-note{
	color:#2e2;
	@include note;
}

輸出的CSS是這樣的：

/*注意看裏面重複的樣式代碼*/
.danger-note{
	color:#e22;
	font-size: 10px;
	text-decoration: underline;
}
.info-note{
	color:#2e2;
	font-size: 10px;
	text-decoration: underline;
}

上面的代碼首先定義一個note混合器，描述了字體大小和下劃線樣式，而後警告信息和常規信息引入這個混合器，各自的顏色又是獨立設置，看上去沒有什麼問題，可是這樣輸出的CSS代碼將形成冗餘，由於都混入了note混合器的規則。

並且，這裏的規則具備強烈的層次關係，由於不論是警告信息仍是常規信息，都具備note混合器定義的樣式，只是二者的顏色不一樣，因此Sass引入了選擇器繼承。

選擇器繼承，讓一個選擇器可以複用另外一個選擇器的全部樣式，但又不重複輸出這些樣式。

.note{
	font-size: 10px;
	text-decoration: underline;
}
.danger-note{
	color:#e22;
	@extend .note;
}
.info-note{
	color:#2e2;
	@extend .note;
}

輸出的CSS是這樣的：

.note, .danger-note, .info-note{
	font-size: 10px;
	text-decoration: underline;
}
.danger-note{
	color:#e22;
}
.info-note{
	color:#2e2;
}

能夠看到，當用@extend繼承.note的樣式時，.danger-note和.info-note也徹底套用了.note的樣式，並且你會發現，規則並無被重複輸出，並且這樣的方式更符合咱們對於這幾個選擇器的認知（若是你以前用過面向對象編程的話）。

而有時候咱們其實並不須要父類在輸出文件中輸出（是否是很像抽象類），這個時候咱們能夠用佔位符（以**%**開頭），好比上面的例子：

%note{
	font-size: 10px;
	text-decoration: underline;
}
.danger-note{
	color:#e22;
	@extend %note;
}
.info-note{
	color:#2e2;
	@extend %note;
}

生成的CSS：

.danger-note, .info-note{
	font-size: 10px;
	text-decoration: underline;
}
.danger-note{
	color:#e22;
}
.info-note{
	color:#2e2;
}

你會發現輸出的CSS中沒有爲note輸出，佔位選擇器能把經常使用的樣式保存在一處，且不影響任何一個類名，能夠放心使用。

至此，咱們瞭解到Sass的四大特性：變量、選擇器嵌套、混合器和選擇器繼承，而且瞭解它們是怎麼幫助咱們減小編寫樣式表時的冗餘和提升咱們的效率和質量的，你能夠暫時不去了解細節，畢竟這一篇只是想告訴你們Sass是怎麼發揮做用的，接下來咱們再仔細去探索下sass的語法，看sass究竟是怎麼寫的、有什麼注意事項和一些這裏還沒講到的技巧。