Sass 簡介

1. 前言

這個(gè)專題的文章我將帶大家從零開始學(xué)習(xí) Sass。在目前的企業(yè)級(jí)應(yīng)用前端開發(fā)中，會(huì)大量地應(yīng)用到 Sass 。那什么是 Sass 呢？Sass 有哪些特性？ Sass 有哪些優(yōu)點(diǎn)？在開發(fā)中我們?yōu)槭裁匆褂盟?？怎么用它？接下來將開始我們的 Sass 之旅，讓它在你的開發(fā)中大放異彩～

2. 什么是 Sass？

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

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

這段話中最關(guān)鍵的一處 CSS extension language , 翻譯過來就是 CSS 擴(kuò)展語言，這段話的總體意思就是說 Sass 是一個(gè)穩(wěn)定的、強(qiáng)大的、專業(yè)級(jí)的 CSS 擴(kuò)展語言。所以說，它是基于 CSS 擴(kuò)展出來的，也有另一個(gè)叫法，Sass 是一個(gè) CSS 預(yù)處理器，所以說 Sass 是需要編譯后轉(zhuǎn)換為 CSS 的，它一定是在你的項(xiàng)目編譯時(shí)去做處理，而不是在運(yùn)行時(shí)，了解這一點(diǎn)很重要！

3. 為什么要使用 Sass？

CSS 已經(jīng)可以滿足我們編寫各種樣式，我們?yōu)槭裁从忠褂盟臄U(kuò)展語言 Sass 呢？很重要的原因就是提高開發(fā)效率和提高代碼可維護(hù)性！在大型的 web 應(yīng)用開發(fā)中我們一般會(huì)編寫大量的樣式代碼，Sass 在 CSS 的基礎(chǔ)上提供了變量、嵌套 (nesting)、混合 (mixins) 、函數(shù)、指令等功能，使得我們可以更高效地編寫樣式，同時(shí)你還可以像編寫 JS 一樣來靈活地控制你的樣式代碼，這給 CSS 的開發(fā)帶來了極大的便利！

3.1 Sass 初體驗(yàn)

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

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

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

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

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

3.2 幾種 CSS 預(yù)處理語言的對(duì)比

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

我認(rèn)為 Sass 最大的優(yōu)勢(shì)在于它誕生的比較早，比較成熟，同時(shí)還有 ruby 社區(qū)的良好支持以及 Compass 這個(gè)強(qiáng)大的工具庫；還有就是它更好的支持條件語句，是我們熟知的 if else 的寫法，整體來說功能比較強(qiáng)大，熱度比較高。

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

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

4. Sass 的版本說明

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

Sass 的新版本會(huì)盡可能向前兼容，但有時(shí)需要進(jìn)行突破性的更改。同時(shí) Sass 需要跟上不斷發(fā)展的 CSS 規(guī)范，舊的語言設(shè)計(jì)錯(cuò)誤偶爾需要修正。在每一個(gè)突破性的更改發(fā)布之前，Sass 實(shí)現(xiàn)將為其行為將發(fā)生更改的樣式表生成棄用警告。

5. 學(xué)習(xí)基礎(chǔ)

學(xué)習(xí)這門課程一定需要有 CSS 基礎(chǔ)，如果您還不了解 CSS，那么請(qǐng)先學(xué)習(xí) CSS 的課程，有了 CSS 基礎(chǔ)后再使用 Sass 才會(huì)展現(xiàn)它的 "威力"！