什么是 CSS 預(yù)處理器？
“CSS 預(yù)處理器用一種專門(mén)的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的 CSS 文件，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題”，例如你可以在 CSS 中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)（如右側(cè)代碼編輯器中就使用了變量$color）等等在編程語(yǔ)言中的一些基本特性，可以讓你的 CSS 更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。
什么是 Sass？
Sass 官網(wǎng)上是這樣描述 Sass 的：
Sass 是一門(mén)高于 CSS 的元語(yǔ)言，它能用來(lái)清晰地、結(jié)構(gòu)化地描述文件樣式，有著比普通 CSS 更加強(qiáng)大的功能。Sass 能夠提供更簡(jiǎn)潔、更優(yōu)雅的語(yǔ)法，同時(shí)提供多種功能來(lái)創(chuàng)建可維護(hù)和管理的樣式表。
Sass 和 SCSS 有什么區(qū)別？
Sass 和 SCSS 其實(shí)是同一種東西，我們平時(shí)都稱之為 Sass，兩者之間不同之處有以下兩點(diǎn)：
1、文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名
2、語(yǔ)法書(shū)寫(xiě)方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書(shū)寫(xiě)，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語(yǔ)法書(shū)寫(xiě)和我們的 CSS 語(yǔ)法書(shū)寫(xiě)方式非常類似。
看個(gè)小示例：
** Sass 語(yǔ)法 **
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100% $font-stack
color: $primary-color
** Scss 語(yǔ)法 **
$font-stack: Helvetica, sans-serif;
$primary-color: #333; // 定義變量
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來(lái)的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
** 注： .sass 和 .scss 不同后綴的文件，代表的兩種語(yǔ)法格式，不能串哦！ **
Sass/SCSS 和純 CSS 寫(xiě)法差很多嗎？
Sass 和 CSS 寫(xiě)法有差別：
Sass 和 CSS 寫(xiě)法的確存在一定的差異，由于 Sass 是基于 Ruby 寫(xiě)出來(lái)，所以其延續(xù)了 Ruby 的書(shū)寫(xiě)規(guī)范。在書(shū)寫(xiě) Sass 時(shí)不帶有大括號(hào)和分號(hào)，其主要是依靠嚴(yán)格的縮進(jìn)方式來(lái)控制的。如：
Sass寫(xiě)法：
body
color: #fff
background: #f36
而在 CSS 我們是這樣書(shū)寫(xiě)：
body{
color:#fff;
background:#f36;
}
SCSS 和 CSS 寫(xiě)法無(wú)差別：
SCSS 和 CSS 寫(xiě)法無(wú)差別，這也是 Sass 后來(lái)越來(lái)越受大眾喜歡原因之一。簡(jiǎn)單點(diǎn)說(shuō)，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。
Sass安裝（windows版）
在 Windows 平臺(tái)下安裝 Ruby 需要先有 Ruby 安裝包，大家可以到 Ruby 的官網(wǎng)（http://rubyinstaller.org/downloads）下載對(duì)應(yīng)需要的 Ruby 版本。
Ruby 安裝文件下載好后，可以按應(yīng)用軟件安裝步驟進(jìn)行安裝 Ruby。在安裝過(guò)程中，個(gè)人建議將其安裝在 C 盤(pán)下，在安裝過(guò)程中選擇第二個(gè)選項(xiàng)（不選中，就會(huì)出現(xiàn)編譯時(shí)找不到Ruby環(huán)境的情況），如下圖所示：
一些查看命令
// 修改源 移除源
gem sources --remove https://rubygems.org/
// 指定源
gem sources -a https://ruby.taobao.org/
// 查看源
gem sources -l
返回結(jié)果如下：
*** CURRENT SOURCES ***
https://ruby.taobao.org
// 查測(cè) Sass 及更新
sass -v
// 更新 Sass
gem update sass
卸載（刪除）Sass
在常期使用的時(shí)候難免會(huì)碰到無(wú)法解決的問(wèn)題，有時(shí)候可能需要卸載 Sass，然后再重新安裝 Sass。那么怎么卸載 Sass 呢？
其實(shí)他也就是一句命令的事情：
gem uninstall sass