下圖是前端CSS預(yù)處理語(yǔ)言截止到2017/3/18在GitHub上的星星數(shù)，雖然SCSS不是最多的，但是它一定是最豐富的預(yù)處理語(yǔ)言，后續(xù)將繼續(xù)分享其他預(yù)處理語(yǔ)言。
一、下載及安裝
方式一：先下載ruby，然后基于ruby安裝sass，webstrom綁定監(jiān)聽(tīng)即可。
方式二：先下載node.js，然后下載gulp/grunt，最后安裝SCSS，這個(gè)不用webstrom綁定監(jiān)聽(tīng)。
二、實(shí)用語(yǔ)法
首先要說(shuō)一下，SASS和SCSS是一樣的，只是SCSS是SASS的3.0引入的語(yǔ)法而已。
1.嵌套 (合理嵌套，從祖先元素到當(dāng)前元素的層層嵌套，可能導(dǎo)致文件體積及復(fù)雜度劇增)
PS：支持“&”父元素選擇器嵌套，支持屬性嵌套；@at-root3.3.0推出的新功能，跳出嵌套。
2.變量----使用“$”定義
a. SCSS支持變量作用域和字符串中嵌套變量，具體說(shuō)明看下圖：
b.變量作用域
局部變量只能在“{}”內(nèi)部有效，！global可以將局部變量轉(zhuǎn)換成全局變量（sass3.2.0推出功能）；若定義變量為默認(rèn)值，在其后加上“!default”
PS:一般變量使用“$”，字符串嵌套變量使用#｛｝。
3.混合(Mixin)
使用很簡(jiǎn)單，使用@mixin定義，@include引用。
a.混合的初級(jí)應(yīng)用----定義和調(diào)用
b.混合的中級(jí)應(yīng)用----變量初始化及賦值
c.混合的高級(jí)應(yīng)用----無(wú)參及多參數(shù)
4.繼承----使用“@extend”
一般繼承class，編譯以后，css中該class也會(huì)出現(xiàn)，如果你不想讓公共的class在css中出現(xiàn)，可以使用“%”占位符選擇器。
5.函數(shù)及運(yùn)算
這里以顏色函數(shù)及@each為例，其他很多函數(shù)自己可以去看看官網(wǎng)，不然一篇文根本寫(xiě)不完。
a.將顏色變深變淺，顏色加減等。
b. @each
這個(gè)函數(shù)很不錯(cuò)，可以讓你對(duì)多個(gè)背景圖一次書(shū)寫(xiě)完成，但是需要注意的是對(duì)應(yīng)class的名字要取的和“in”后面的數(shù)組一致，且順序不能亂。
6.注釋、@import、編譯風(fēng)格
a.注釋
/* */css中顯示，//css中不顯示，/*重要注釋!*/壓縮不會(huì)被刪掉。
b. @import
該標(biāo)簽可引入sass、scss、css文件，如果將一個(gè)scss另一個(gè)又不想立馬被編譯成css的話(huà)，可寫(xiě)成
@import “_mixin.scss“。
c. 4種編譯風(fēng)格
*nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
*expanded：沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼。
*compact：簡(jiǎn)潔格式的css代碼。
*compressed：壓縮后的css代碼。
命令行：
sass --style compressed test.sass test.css
三、我是怎么在項(xiàng)目中使用SASS的
1.適當(dāng)CSS RESET
SASS有reset模塊，但是因?yàn)槲覀兊捻?xiàng)目不是所有的reset樣式都用，所以我們一般適當(dāng)選擇一部分reset。（考慮文章問(wèn)題，將樣式都寫(xiě)成了一行，項(xiàng)目中不建議這樣寫(xiě)）
2.定義公共變量
根據(jù)需要定義使用到的變量，以便引用，公共變量命名需便于理解且不重復(fù)。
3.項(xiàng)目中使用部分展示
是不是覺(jué)得SASS也不難吧！下篇將和大家一起學(xué)習(xí)LESS使用。
