1. CSS 的一些不那么美好的地方
- CSS 不是一種編程語言，對于開發(fā)人員不是很友好。
- CSS 在開發(fā)中會有許多重復勞動，效率低。
- 當 UI 達一定規(guī)模后，CSS 很容易冗余，并且難以維護。
2. SASS 是神馬
SASS (Syntactically Awesome StyleSheets) 是一種 CSS 預處理器，可以用它來定義一套新的語法規(guī)則和函數(shù)，以加強和提升CSS。通過這種新的編程語言，可以高效率地使用少量的代碼創(chuàng)建復雜的設計。它改進并增強了CSS的能力，增加了變量，局部和函數(shù)這些特性。
3. why SASS
- 兼容各版本 CSS 語法。
- 功能豐富
- 穩(wěn)定成熟
- 久經(jīng)考驗
- 廣泛的社區(qū)
- 前端框架的基石（compass 以及 bootstrap 4）
4. SASS 基礎(chǔ)入門 （可參考SASS 中文網(wǎng)）
4.1 SASS 文件后綴名
sass 有兩種后綴名，一種是sass，另一種是scss。使用scss后綴名，更符合我們平時書寫css的習慣，即使用大括號和分號。
4.2 使用變量
sass最讓人受益的一個重要特性就是引入了變量。sass使用$符號來標識變量。
4.2.1變量聲明
sass變量的聲明和css屬性的聲明很像?？梢栽?code>css規(guī)則塊外面或規(guī)則塊里面進行聲明（在規(guī)則塊里面聲明時，該變量只在該規(guī)則塊里有效）。
4.2.2 變量引用
css屬性標準值存在的地方，便可引用變量。css生成的時候，變量會被它們的值取代。
4.2.3 變量使用中劃線還是下劃線分隔
隨意咯！
4.3 嵌套 CSS 規(guī)則
css重復寫選擇器是很煩人的，sass的嵌套規(guī)則允許你寫一遍并且可讀性更好，避免重復書寫。
4.3.1 父選擇器標識符 &
在為父級選擇器添加:hover等偽類時，這種方法特別好用。
還有另外一種用法，你可以在父選擇器前面添加選擇器。
4.3.2 群組選擇器的嵌套
4.3.3 子組合選擇器和同層組合選擇器：>、+和~
和其他選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。
4.3.4 嵌套屬性
在sass中，不僅可以嵌套選擇器，還可以嵌套屬性。
4.4 導入 SASS
sass也有一個@import規(guī)則，但不同的是，sass 的@import規(guī)則在生成css文件時就把相關(guān)文件導入進來。這意味著所有相關(guān)的樣式被歸納到了同一個css文件中，而無需發(fā)起額外的下載請求。另外，所有在被導入文件中定義的變量和混合器均可在導入文件中使用。
使用sass的@import規(guī)則并不需要指明被導入文件的全名。你可以省略.sass或.scss文件后綴。
4.4.1 使用局部 sass 文件
sass局部文件的文件名以下劃線開頭。這樣，sass不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用作導入。舉個栗子，導入themes/_night-sky.scss這個局部文件里的變量，你只需在樣式表中寫@import "themes/night-sky"。
4.4.2 默認變量值
一般情況下，反復聲明一個變量，只有最后一個會生效并且會覆蓋前面的值。在sass中，為防止你寫的變量被@import的sass庫文件覆蓋，可以使用!default值。
$highlight-color: #f90 !default;
.selected {color: $highlight-color;}
4.4.3 嵌套導入
sass的@import可以在css規(guī)則塊內(nèi)使用，局部文件被直接插入到導入它的地方。
4.5 靜默注釋
sass提供了除了css中標準注釋格式/*...*/外另一種注釋，即靜默注釋//，采用//的sass注釋不會出現(xiàn)在生成的css中。
4.6 混合器
可以通過sass的混合器實現(xiàn)大段樣式的重用?；旌掀魇褂?code>@mixin標識符定義，通過@include來使用混合器。
4.6.1 何時使用混合器
如果你發(fā)現(xiàn)自己在不停地重復一段樣式，那就應該把這段樣式構(gòu)造成優(yōu)良的混合器，尤其是這段樣式本身就是一個邏輯單元，比如說是一組放在一起有意義的屬性。
如何判斷一組屬性是否可以組成混合器，可以看你是否可以為這個混合器想出一個簡潔的名字，如rounded-corner等。
4.6.2 混合器中的 CSS 規(guī)則
混合器中不僅可以包含屬性，也可以包含css規(guī)則，包含選擇器和選擇器中的屬性。
@minxin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
4.6.3 給混合器傳參
可以通過在@include混合器時給混合器傳參，來定制混合器生成的精確樣式。在@include混合器時，可以把它當作css函數(shù)一樣來傳參。
4.6.4 默認參數(shù)值
可以在定義混合器時給參數(shù)指定一個默認值。參數(shù)默認值使用$name: default-value的聲明形式，默認值可以是任何有效的css屬性值，甚至是其他參數(shù)的引用。
4.7 使用選擇器繼承來精簡CSS
基于Nicole Sullivan 面向?qū)ο蟮?code>css的理念，選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現(xiàn)。（ps: 推薦使用%占位符選擇器進行替代。）
4.8 進階閱讀
5 在項目中實踐
5.1 安裝 gulp-sass
運行如下命令：
npm install gulp-sass --save-dev
5.2 編寫 gulpfile.js
5.2.1 加載插件
5.2.2 建立任務
5.2.3 事件監(jiān)聽
5.3 運行
gulp develop
