Sass 簡介

1. 前言

這個專題的文章我將帶大家從零開始學習 Sass。在目前的企業級應用前端開發中，會大量地應用到 Sass 。那什么是 Sass 呢？Sass 有哪些特性？ Sass 有哪些優點？在開發中我們為什么要使用它？怎么用它？接下來將開始我們的 Sass 之旅，讓它在你的開發中大放異彩～

2. 什么是 Sass？

在說 Sass 之前不得不說到 CSS，相信你在看這篇文章之時一定是了解 CSS 的，以前的前端開發中我們一般是通過 CSS 來編寫樣式，而在現代化的前端開發中我們大多數企業中都在使用 Sass 來編寫樣式。那什么是 Sass 呢？我們引用 Sass 官網的一段話：

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. — 官網

這段話中最關鍵的一處 CSS extension language , 翻譯過來就是 CSS 擴展語言，這段話的總體意思就是說 Sass 是一個穩定的、強大的、專業級的 CSS 擴展語言。所以說，它是基于 CSS 擴展出來的，也有另一個叫法，Sass 是一個 CSS 預處理器，所以說 Sass 是需要編譯后轉換為 CSS 的，它一定是在你的項目編譯時去做處理，而不是在運行時，了解這一點很重要！

3. 為什么要使用 Sass？

CSS 已經可以滿足我們編寫各種樣式，我們為什么又要使用它的擴展語言 Sass 呢？很重要的原因就是提高開發效率和提高代碼可維護性！在大型的 web 應用開發中我們一般會編寫大量的樣式代碼，Sass 在 CSS 的基礎上提供了變量、嵌套 (nesting)、混合 (mixins) 、函數、指令等功能，使得我們可以更高效地編寫樣式，同時你還可以像編寫 JS 一樣來靈活地控制你的樣式代碼，這給 CSS 的開發帶來了極大的便利！

3.1 Sass 初體驗

在此我們先體驗一下 Sass 中的嵌套，首先我先用 CSS 來寫一段代碼：

.first {
  color: red;
}
.first .two {
  color: blue;
}
.first .two .three {
  color:green;
}

可以看到類似上面這種的 CSS 代碼應該是項目中比較常見的，我們通過父選擇器一層一層的去編寫子元素的樣式，重復的編寫父選擇器，那如果是使用 Sass 可以怎樣寫呢？請看如下代碼：

.first {
  color:red;
  .two {
    color:blue;
    .three {
       color:green;
     }
   }
}

這么寫起來是不是很爽～你可以嵌套著去編寫，而不需要每次都將父級選擇器給寫上，同時也比較便于維護。這僅僅是 Sass 提供的一個小擴展，這里只做一個簡單的演示，后面將逐一對 Sass 提供的各種功能進行詳細講解。

3.2 幾種 CSS 預處理語言的對比

CSS 的預處理語言不是只有 Sass，目前市面上有很多種，比如 less、Stylus、Turbine、Swithch CSS 等等，目前比較主流的就是 Sass、less、Stylus ，那么 Sass 相較于其他的幾種有什么優缺點呢？

我認為 Sass 最大的優勢在于它誕生的比較早，比較成熟，同時還有 ruby 社區的良好支持以及 Compass 這個強大的工具庫；還有就是它更好的支持條件語句，是我們熟知的 if else 的寫法，整體來說功能比較強大，熱度比較高。

而 Sass 最大的一個痛點我認為就是安裝過于繁瑣，Sass 的安裝需要 Ruby 環境，所以在安裝上步驟稍多了些，同時在國內使用 npm 安裝的時候也確實是慢的可以，你可能需要將 npm 鏡像源切換為淘寶源，后面會詳細介紹。

總的來說，選擇 Sass 作為 CSS 預處理語言的入門還是比較容易的，另外還要考慮到企業中前端技術團隊對技術棧的需求，可能有的團隊使用 Sass，有的團隊使用其他。

4. Sass 的版本說明

本教程編寫時使用的 Sass 版本為 v3.x.x 版本，node-sass 版本為 v4.x.x 版本 Sass 直到目前為止一共發布了 300 多個版本。

Sass 的新版本會盡可能向前兼容，但有時需要進行突破性的更改。同時 Sass 需要跟上不斷發展的 CSS 規范，舊的語言設計錯誤偶爾需要修正。在每一個突破性的更改發布之前，Sass 實現將為其行為將發生更改的樣式表生成棄用警告。

5. 學習基礎

學習這門課程一定需要有 CSS 基礎，如果您還不了解 CSS，那么請先學習 CSS 的課程，有了 CSS 基礎后再使用 Sass 才會展現它的 "威力"！