下圖是前端CSS預(yù)處理語言截止到2017/3/18在GitHub上的星星數(shù)往枷，雖然SCSS不是最多的框产，但是它一定是最豐富的預(yù)處理語言，后續(xù)將繼續(xù)分享其他預(yù)處理語言师溅。
一疙描、下載及安裝
方式一：先下載ruby，然后基于ruby安裝sass氮唯，webstrom綁定監(jiān)聽即可轧简。
方式二：先下載node.js，然后下載gulp/grunt嗡载，最后安裝SCSS窑多，這個不用webstrom綁定監(jiān)聽。
二洼滚、實用語法
首先要說一下埂息，SASS和SCSS是一樣的，只是SCSS是SASS的3.0引入的語法而已遥巴。
1.嵌套 (合理嵌套千康，從祖先元素到當(dāng)前元素的層層嵌套，可能導(dǎo)致文件體積及復(fù)雜度劇增)
PS：支持“&”父元素選擇器嵌套铲掐，支持屬性嵌套拾弃；@at-root3.3.0推出的新功能，跳出嵌套摆霉。
2.變量----使用“$”定義
a. SCSS支持變量作用域和字符串中嵌套變量豪椿，具體說明看下圖：
b.變量作用域
局部變量只能在“{}”內(nèi)部有效奔坟，！global可以將局部變量轉(zhuǎn)換成全局變量（sass3.2.0推出功能）搭盾；若定義變量為默認(rèn)值咳秉，在其后加上“!default”
PS:一般變量使用“$”，字符串嵌套變量使用#｛｝增蹭。
3.混合(Mixin)
使用很簡單滴某，使用@mixin定義，@include引用滋迈。
a.混合的初級應(yīng)用----定義和調(diào)用
b.混合的中級應(yīng)用----變量初始化及賦值
c.混合的高級應(yīng)用----無參及多參數(shù)
4.繼承----使用“@extend”
一般繼承class霎奢，編譯以后，css中該class也會出現(xiàn)饼灿，如果你不想讓公共的class在css中出現(xiàn)幕侠，可以使用“%”占位符選擇器。
5.函數(shù)及運(yùn)算
這里以顏色函數(shù)及@each為例碍彭，其他很多函數(shù)自己可以去看看官網(wǎng)晤硕，不然一篇文根本寫不完。
a.將顏色變深變淺庇忌，顏色加減等舞箍。
b. @each
這個函數(shù)很不錯，可以讓你對多個背景圖一次書寫完成皆疹，但是需要注意的是對應(yīng)class的名字要取的和“in”后面的數(shù)組一致疏橄，且順序不能亂。
6.注釋略就、@import捎迫、編譯風(fēng)格
a.注釋
/* */css中顯示，//css中不顯示表牢，/*重要注釋!*/壓縮不會被刪掉窄绒。
b. @import
該標(biāo)簽可引入sass、scss崔兴、css文件彰导，如果將一個scss另一個又不想立馬被編譯成css的話，可寫成
@import “_mixin.scss“敲茄。
c. 4種編譯風(fēng)格
*nested：嵌套縮進(jìn)的css代碼螺戳，它是默認(rèn)值。
*expanded：沒有縮進(jìn)的折汞、擴(kuò)展的css代碼。
*compact：簡潔格式的css代碼盖腿。
*compressed：壓縮后的css代碼爽待。
命令行：
sass --style compressed test.sass test.css
三损同、我是怎么在項目中使用SASS的
1.適當(dāng)CSS RESET
SASS有reset模塊，但是因為我們的項目不是所有的reset樣式都用鸟款，所以我們一般適當(dāng)選擇一部分reset膏燃。（考慮文章問題，將樣式都寫成了一行何什，項目中不建議這樣寫）
2.定義公共變量
根據(jù)需要定義使用到的變量组哩，以便引用，公共變量命名需便于理解且不重復(fù)处渣。
3.項目中使用部分展示
是不是覺得SASS也不難吧伶贰！下篇將和大家一起學(xué)習(xí)LESS使用。
