sass筆記-2|Sass基礎語法之讓樣式表更具條理性和可讀性

這一篇主要詳述保持sass條理性和可讀性的3個最基本方法——嵌套、導入和註釋。

零. 變量

變量自己的做用是爲了保持屬性值的可維護性，把全部須要維護的屬性值放在同一個地方，快速更改，到處生效，可謂售後無憂。

1.變量聲明

變量用"$"符號開頭進行聲明，任何能夠用做CSS屬性值的東西均可以用做sass變量的值，單個值、空格分開的多個值、逗號分開的多個值均可以：

$primary-color: #233;
$general-border: 1px solid #ddd;

變量通常聲明在sass源代碼的開頭處，CSS規則塊外（花括號外面），便於尋找和維護，不過有時候你也想將變量聲明在規則塊內，這也是沒有問題的，只是這樣就只能在塊內使用，相似「塊做用域」。

2.變量使用

凡是CSS屬性的標準值可存在的地方，變量均可以使用，並且變量能夠被引用在另外一個變量的聲明中：

$primary-color: #233;
$general-border: 1px solid $primary-color;

可能還見到過形如#{$val}這樣去用變量的，用#{和}包裹，這實際上是把變量當作一個表達式在用，這樣的用法叫插值，這個在sass高級特性中再述。

一. 嵌套——層次

嵌套規則就像洋蔥，一層一層，頗有層次感，便可讀性和條理性。最多見的選擇器嵌套，就是一層層打開，通常被包含選擇器做爲包含選擇器的後代選擇器展開：

/*sass*/
li{
	float:left;
	a{
		color: #c33;
	}
}
/*生成的css*/
li{
	float:left;
}
li a{
	color:#c33;
}

1. 父選擇器標識符&

父選擇器標識符&能夠放在任何一個選擇器能夠出現的地方，表明的就是字面意思——父選擇器，爲何要有這個東西呢？由於不想無腦化被當作後代展開，最多見的好比當嵌套僞類選擇器時：

li{
	float:left;
	a{
		color: #233;
		&:hover{
			color:#c33;
		}
	}
}
/*這樣生成的CSS是這樣的*/
li{
	float:left;
}
li a{
	color:#233;
}
/*注意這裏的a選擇器和僞類選擇器間沒有空格，&被父選擇器直接替換*/
li a:hover{
	color:#c33
}

當包含父選擇器標識符的嵌套規則打開時，不會簡單當作後代選擇器拼接，而是&被父選擇器直接替換。

僞類是一種經常使用用法，固然這個「飆師傅」——&——也能夠放在選擇器後面（記得遇到&打開時不是被正常拼接，能夠替換）：

#content aside{
	color:red;
	body.ie & { color:green }
}
/*輸出的css是這樣的*/
#content aside{
	color:red;
}
body.ie #content aside { color:green }

2. 複雜選擇器嵌套

• 羣組選擇器，如h1,h2,h3{ a{...} }或者div{ h1,h2,h3{...} }，sass會正確處理，分別打開組合h1 a, h2 a, h3 a{...}，div h1, div h2, div h3{...}
• 子組合選擇器和同層選擇器：>、+和~ ，sass都會正確處理，無論它們是在選擇器前仍是後

3. 屬性嵌套

寫背景樣式時寫一堆background-XX很煩吧，屬性嵌套能夠幫你減小一些工做量。把屬性名從中劃線的地方斷開，在根屬性後邊添加一個冒號，緊跟一個花括號塊，把子屬性寫在花括號中：

div{
	background:{
		image: url(./img/233.png);
		repeat: no-repeat;
		size: contain;
	}
}

二. 導入——@import

Sass的@import和CSS的不同。CSS的@import，只有在執行到的時候纔去下載其餘CSS文件，這就影響了頁面加載；而Sass的@import在生成CSS文件的時候就把相關文件導入進來了。

1.sass的@import語法

Sass的@import並不須要指明被導入文件的全名，便可以省略.sass或者.scss擴展名。

此外，每一個sass文件通常會被輸出成CSS文件，但其實當咱們用@import引入sass文件時，咱們僅僅但願生成一個整體的css文件，不須要每一個sass文件都被輸出成css，這樣的文件被稱做"sass局部文件"，即不會被單獨編譯輸出成css，用來被引入。

Sass局部文件須要如下劃線開頭，當用@import引入時，不只能夠省略擴展後綴，也能夠省略開頭的下劃線。

因此，假設咱們有一個"_nav.scss"和一個"article.scss"須要引入，那麼咱們僅僅這麼寫就夠了:

@import "nav"
@import "article"

並且，sass的@import命令能夠寫在CSS規則內，這會使生成的CSS規則直接被插入到導入的地方。你能夠把@import命令看作一個宏，寫在哪裏，那裏就被要導入的sass文件源代碼替換。

2. 導入後可定製

導入機制能讓你的sass根據某種依據分紅幾個板塊（如根據不一樣的區域），那麼導入某個sass文件，這個文件徹底決定了這部分的樣式，如顏色、字體、字號等。

而你想讓導入後，還能修改一些值以定製本身須要的樣式，好比顏色、大小等，尤爲是當小明想導入你的sass文件時，可能被導入的樣式設置不能很好知足他本身的需求，這個時候有兩種作法：

1. 小明在導入後，從新去聲明一遍想修改的變量，而且給一個新的值，寫在後面的值會覆蓋前面的；
2. 你在你的sass源文件中用!default修飾變量值從而設置變量默認值，再發布出去給別人用，如$link-color:red !default。這個時候小明若是僅僅引入不想改，那麼就是這個值，若是他想改，就能夠在任何一處從新聲明這個變量，那麼就會變成小明的值。

兩種方式都要從新聲明，是否是「脫褲子放屁」呢？嗯，有點這個意思！區別在於：

變量值後面用!default修飾，就有了默認值，這個變量無論在哪裏被聲明，就會用聲明的值，這意味着，你能夠在引入含有須要修改變量值的sass文件前，聲明這個變量爲你要的值，後面引入的文件中的值不會覆蓋你聲明的變量值。

3. 怎麼回到CSS原生的@import機制

下面的任一狀況都會致使使用CSS原生的@import機制：

1. 被導入文件的名字以.css結尾；
2. 被導入文件的名字是一個URL地址；
3. 被導入文件的名字是CSS的url()值。

三. 註釋——看得見和看不見

Sass的註釋有兩種形式，一種是來自CSS的註釋風格，用\*和*\包裹，這種註釋當Sass文件被編譯輸出css時是會輸出的，

另外一種註釋方式是，以//開頭的單行註釋，這被稱爲靜默註釋，由於這樣的註釋在被編譯輸出css時是不會被輸出到CSS文件中的，此外，這種註釋寫起來簡單快捷啊。

四. 小結

保持條理性和可讀性的3種基本方式，拆分不一樣板塊的Sass文件，而後經過@import引入；嵌套選擇器和屬性，不但能夠幫助增長層次和條理，還能減小打字量（變相減小了打字出錯）；註釋永遠是一個好習慣。