CSS預(yù)處理器，用一種專門的語言進行頁面Web樣式設(shè)計，編譯生成正常的CSS文件以供使用，可以讓CSS更加簡潔、適應(yīng)性更強、可讀性更佳、更易于代碼的維護。
優(yōu)秀的CSS預(yù)處理器語言包括Sass、LESS、Stylus等，本文主要介紹Sass。
Sass是最成熟、穩(wěn)定、強大、專業(yè)的CSS擴展語言。
Sass的兩種文件后綴
.sass
這種后綴的Sass文件使用類Ruby的語法，如下，屬性之間通過換行分割，而不是分號。這種語法對于我這種屬性C++、C等后端語言的前端開發(fā)者來說有點不太友好~~~
h1
color: #000
background: #fff
.scss
幸好Sass在3.0版本中引入Scss語法，這種語法是CSS語法的超集，如下，這種語法我就比較喜歡了！
h1 {color: #000; background: #fff}
兩種語法沒有好壞之分，如果你習(xí)慣Python或者Ruby，那Sass對你來說無疑是更好的選擇，更對于正統(tǒng)的前端開發(fā)者來說，應(yīng)該會和我一樣喜歡Scss語法了。
當(dāng)然你也可以在一個項目中混合使用兩種語法，但注意，不要在一個文件中混合使用兩種語法。
兩種文件之間的轉(zhuǎn)換也很簡單，如下，哪里不會轉(zhuǎn)哪里，so easy~~~
sass-convert main.scc main.sass
Sass安裝
安裝Ruby
對于使用Windows是我來說，這一步再簡單不過了。從這里 下載相應(yīng)版本的Ruby進行傻瓜安裝即可。由于要在命令行使用Ruby，安裝時要把Ruby可運行文件加載到PATH里。命令行輸入ruby -v 檢查Ruby是否安裝成功。
Ruby安裝完成之后，gem也就安裝好了，這就和安裝好node.js之后，npm就安裝好了一樣。
由于國內(nèi)網(wǎng)絡(luò)的原因，Ruby原有的sources經(jīng)常間歇性的鏈接不上，所以我們首先修改Ruby sources，命令如下：
//移除原有的sources
gem sources --remove https://rubygems.org/
//添加國內(nèi)淘寶的sources
gem sources -a https://ruby.taobao.org/
//如果上面那個失敗的話，可以試試下面這個中山大學(xué)的sources（感謝慕課小伙伴提供）
gem sources -a http://mirror.sysu.edu.cn/rubygems/
//檢查
gem sources -l
安裝sass
gem install sass
//檢查sass是否安裝成功
sass -v
//也可以指定需要安裝的sass的版本,如下：
gem install sass --version=3.3.0
//卸載某一個版本的sass
gem uninstall sass --version=3.3.0
Sass語法介紹（基礎(chǔ)篇）
變量
sass的變量使用$符號定義
$headline-ff: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
$main-sec-ff: Arial, Verdana, Helvetica, sans-serif;
變量的使用：
.headline {
font-family: $headline-ff;
}
.main-sec {
font-family:$main-sec-ff;
}
Sass也提供了很方便的嵌套語法，如下：
.main-sec {
font-family:$main-sec-ff;
.headline {
font-family: $main-sec-ff;
}
}
這種用法相當(dāng)于下面的寫法：
.main-sec {
font-family:$main-sec-ff;
}
.main-sec .headline{
font-family:$main-sec-ff;
}
但是對于hover則會出現(xiàn)問題，比如：
a {
:hover {
color:blue;
}
}
它生成的css文件是下面這樣的，顯然這種結(jié)果不符合我們的預(yù)期
<!-- a后面有一個空格 -->
a :hover {
color:blue;
}
為了解決這個問題，Sass提供了父選擇器&，如下：
a {
&:hover {
color:blue;
}
}
我們一般將變量定義放在一個專門的文件里，比如_variables.scss（加下劃線表明是一個局部文件，因為它不需要編譯生成對應(yīng)的CSS文件），在需要使用變量的文件（宿主文件）里，只需要引入這些變量即可，如下：
@import "variables";
Sass里的@import 和CSS里原生的@import
Sass的@import和CSS里原生的@import 指令的不同，CSS里原生的@import指令有兩大弊端：
必須放在代碼最前面，否則不起作用。
-
對性能不利。
比如a引用b，需要瀏覽器把a下載下來，解析渲染a的時候讀到a中@import "b"的指令的時候才會去下載b，此時瀏覽器處于阻塞狀態(tài)，延遲頁面渲染時間。
而Sass重新定義了@import指令的功能，它在編譯階段將被引用文件合并輸出到了相應(yīng)的CSS文件，而且@import指令可以用在文檔的任何地方。
當(dāng)然，如果你非要使用CSS原生的@import也不是沒有可能，一切都有既定的規(guī)則，如果滿足下面4個條件中的任何一個，Sass就會認(rèn)為你想使用CSS原生的@import。
- 當(dāng)@import后面的文件名以.css結(jié)尾的時候
- 當(dāng)@import后面跟的是以http://開頭的字符串的時候
- 當(dāng)@import后面跟的是一個url()函數(shù)的時候
- 當(dāng)@import后面帶有media queries的時候
從上面的@import指令可以看到，我們沒有給"variables"文件指定后綴名，這是基于Sass的既定規(guī)則：
- 沒有文件后綴名的時候，Sass會添加.scss或者.sass
- 統(tǒng)一目錄下，局部文件和非局部文件不能重名（所有文件都不能重名）
Sass注釋
Sass支持下面這兩種格式的注釋，區(qū)別在于第二種格式的注釋在編譯時會生成的對應(yīng)的css文件里。
//這是注釋
/* 這也是注釋*/
