這里是修真院前端小課堂，每篇分享文從
八個方面深度解析前端知識/技能，本篇分享的是：
【如何使用sass? 】
一、背景介紹
CSS預處理器
要了解sass先看一下CSS 預處理器
CSS 預處理器 定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。
俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然后再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。
二、知識剖析
CSS預處理器
要了解sass先看一下CSS 預處理器
CSS 預處理器 定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。
俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然后再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。
二、知識剖析
什么是SASS
Sass 是一門高于 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有著比普通 CSS 更加強大的功能。
Sass 能夠提供更簡潔、更優雅的語法，同時提供多種功能來創建可維護和管理的樣式表。
Sass 是最早的 CSS 預處理語言，有比 LESS 更為強大的功能
Sass 是采用 Ruby 語言編寫的一款 CSS 預處理語言，它誕生于2007年，是最大的成熟的 CSS 預處理語言。
SASS的安裝
sass基于Ruby語言開發而成，因此安裝sass前需要安裝Ruby。
點擊下載
SASS的使用
SASS文件就是普通的文本文件，里面可以直接使用CSS語法。文件后綴名是.scss
SASS提供四個編譯風格的選項
NESTED是 SASS 默認的輸出格式，能夠清晰反映 CSS 與 HTML 的結構關系。選擇器與屬性等單獨占用一行，縮進量與 SASS 文件中一致，每行的縮進量反映了其在嵌套規則內的層數。
COMPACT 輸出方式比起上面兩種占用的空間更少，每條 CSS 規則只占一行，包含其下的所有屬性。嵌套過的選擇器在輸出時沒有空行，不嵌套的選擇器會輸出空白行作為分隔符。
COMPRESSED 輸出方式刪除所有無意義的空格、空白行、以及注釋，力求將文件體積壓縮到最小，同時也會做出其他調整，比如會自動替換占用空間最小的顏色表達方式。
EXPANDED 輸出更像是手寫的樣式，選擇器、屬性等各占用一行，屬性根據選擇器縮進，而選擇器不做任何縮進。
SASS的變量
SASS的變量使用$開頭，可以把反復使用的css屬性值 定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值
SASS的嵌套
在sass中屬性和選擇器嵌套是非常偉大的特性，因為它們不僅大大減少了你的編寫量，而且通過視覺上的縮進使你編寫的樣式結構更加清晰，更易于閱讀和開發。
SASS的注釋
SASS共有兩種注釋風格。
標準的CSS注釋 /* 注釋 */ ，該會保留到編譯后的文件。
單行注釋 // 注釋 ，只保留在SASS源文件中，編譯后被省略。
SASS混合器
混合器使用@mixin標識符定義。
這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式
然后可以通過@include來使用這個混合器，放在你希望的任何地方。調用的混合器會把所有樣式提取出來放在被調用的地方
混合器并不一定總得生成相同的樣式。可以通過在混合器時給混合器傳參，來定制混合器生成的精確樣式。
SASS的繼承
SASS允許一個選擇器，繼承另一個選擇器。
sass的繼承用@extend
SASS的占位符
占位符 用%開頭
占位符也是一個非常強大的功能，和繼承也有著密切的關系。比如說，我們有多個類都有相同的代碼共有，需要繼承同一個基類。但是基類本身并不存在或者基類自身并不需要這些樣式，像繼承的寫法有產生了代碼的冗余，最終會編譯出多余的代碼。
用占位符聲明的代碼，在不被@extend調用的情況下，是不會產生任何代碼的
三、常見問題
混合器和繼承，占位符之間的區別
四、解決方案
五、編碼實戰
六、拓展思考
何時使用混合器
利用混合器，可以很容易地在樣式表的不同地方共享樣式。如果你發現自己在不停地重復一段樣式，那就應該把這段樣式構造成優良的混合器，尤其是這段樣式本身就是一個邏輯單元，比如說是一組放在一起有意義的屬性。
判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你能否為這個混合器想出一個好的名字。如果你能找到一個很好的短名字來描述這些屬性修飾的樣式，那么往往能夠構造一個合適的混合器。如果你找不到，這時候構造一個混合器可能并不合適。
何時使用繼承
繼承是基于類選擇器的（有時是基于其他類型的選擇器），所以繼承應該是建立在語義化的關系上。
如果a的樣式和b的樣式相同，那么就可以使用繼承，讓a繼承b的屬性，或者讓b繼承a的屬性
何時使用占位符
占位符和繼承基本一樣，唯一不同的就是相同的代碼并沒有在基類中存在，而是額外的聲明，如果不被調用就不會產生任何樣式，如果在不同的選擇器調用占位符，那么編譯出來的css代碼將會把相同的代碼合并在一起
七、參考文獻
sass中文手冊
SASS用法指南
八、更多討論
1.sass和預處理器有什么關系？
答：CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然后再編譯成正常的 CSS 文件，以供項目使用。
而Sass 是最早的 CSS 預處理語言。2、sass和Ruby有什么關系？
答：sass基于Ruby語言開發而成，因此安裝sass前需要安裝Ruby。
3、混合器和繼承，占位符有什么區別？
答：混合器，可以很容易地在樣式表的不同地方共享樣式。如果你發現自己在不停地重復一段樣式，那就應該把這段樣式構造成 優良的混合器，尤其是這段樣式本身就是一個邏輯單元，比如說是一組放在一起有意義的屬性。
繼承是基于類選擇器的（有時是基于其他類型的選擇器），所以繼承應該是建立在語義化的關系上。 如果a的樣式和b的樣式相同，那么就可以使用繼承，讓a繼承b的屬性，或者讓b繼承a的屬性 占位符和繼承基本一樣，唯一不同的就是相同的代碼并沒有在基類中存在，而是額外的聲明，如果不被調用就不會產生任何 樣式，如果在不同的選擇器調用占位符，那么編譯出來的css代碼將會把相同的代碼合并在一起