摘要：不過(guò)必須要先安裝，然后再安裝。淘寶鏡像安裝由于國(guó)內(nèi)網(wǎng)絡(luò)原因你懂的，導(dǎo)致存放在上面的資源文件間歇性連接失敗。嵌套可以進(jìn)行選擇器的嵌套，表示層級(jí)關(guān)系。重要注釋管理項(xiàng)目文件結(jié)構(gòu)預(yù)處理器的特點(diǎn)之一是可以把你的代碼分割成很多文件，而且不會(huì)影響性能。

Sass 是 Syntactically Awesome Style Sheets 的縮寫(xiě)，它是CSS的 一個(gè)開(kāi)發(fā)工具，提供了很多便利和簡(jiǎn)單的語(yǔ)法，讓CSS看起來(lái)更像是一門(mén)語(yǔ)言，這種特性也被稱為“CSS預(yù)編譯” 。它的主要涉及思想是讓我們可以按照編程的思路編寫(xiě)自己的樣式，然后通過(guò)“編譯器”生成我們所需要的CSS文件。

官網(wǎng)

Sass 和 Scss 其實(shí)是同一種東西，我們平時(shí)都稱之為 Sass，兩者不同之處有以下兩點(diǎn)：

文件擴(kuò)展名不同。
Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名；

語(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ě)方式非常類似。

PS：本文只討論 SCSS。

SCSS 與 Sass 異同 - Sass 中文文檔

“LESS 要靠 JavaScript 解析，我不喜歡這種做法。另外，LESS 的變量用 @ 表示，我也不太習(xí)慣?！?by 阮一峰

SASS用法指南 - 阮一峰

Sass、LESS 和 Stylus 簡(jiǎn)單對(duì)比

三者都是開(kāi)源項(xiàng)目；

Sass 誕生是最早也是最成熟的 CSS 預(yù)處理器，有 Ruby 社區(qū)和 Compass 支持；Stylus 是早期服務(wù)器 NodeJS 項(xiàng)目，在該社區(qū)得到一定支持者；Less 出現(xiàn)于2009年，支持者遠(yuǎn)超遠(yuǎn)于 Ruby 和NodeJS社區(qū)；

Sass 和 LESS 語(yǔ)法較為嚴(yán)謹(jǐn)、嚴(yán)密，而Stylus語(yǔ)法相對(duì)散漫，其中 LESS 學(xué)習(xí)起來(lái)更快一些，因?yàn)樗馛SS的標(biāo)準(zhǔn)；

Sass 和 LESS 相互影響較大，其中 Sass 受 LESS 影響，已經(jīng)進(jìn)化到了全面兼容 CSS 的 SCSS；

Sass 和 LESS 都有第三方工具提供轉(zhuǎn)譯，特別是 Sass 和 Compass 是絕配；

Sass、LESS 和 Style 都具有變量、作用域、混合、嵌套、繼承、運(yùn)算符、顏色函數(shù)、導(dǎo)入和注釋等基本特性，而且以“變量”、“混合”、“嵌套”、“繼承”和“顏色函數(shù)”成為五大基本特性，各自特性實(shí)現(xiàn)功能基本形似，只是使用規(guī)則上有所不同；

Sass 和 Stylus 具有類似于語(yǔ)言處理的能力，比如說(shuō)條件語(yǔ)句、循環(huán)語(yǔ)句，而 LESS 需要通過(guò) When 等關(guān)鍵詞模擬這些功能，在這一方面略遜一籌。

CSS 預(yù)處理的缺點(diǎn)

個(gè)人感覺(jué)CSS 預(yù)處理器語(yǔ)言那是程序員的玩具，想通過(guò)編程的方式跨界解決 CSS 的問(wèn)題?？梢哉f(shuō) CSS 應(yīng)該面臨的問(wèn)題一個(gè)也少不了，只是增加了一個(gè)編譯過(guò)程而已，簡(jiǎn)單來(lái)說(shuō) CSS 預(yù)處理器語(yǔ)言較 CSS 玩法變得更高級(jí)了，但同時(shí)降低了自己對(duì)最終代碼的控制力。更致命的是提高了門(mén)檻，首先是上手門(mén)檻，其次是維護(hù)門(mén)檻，再來(lái)是團(tuán)隊(duì)整體水平和規(guī)范的門(mén)檻。這也造成了初學(xué)學(xué)習(xí)成本的昂貴。

CSS預(yù)處理器——Sass、LESS和Stylus實(shí)踐【未刪減版】 - W3CPlus - 2013-03-13

我選擇 Sass 的原因：

Sass也是成熟的 CSS 預(yù)處理器之一，而且又有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)；

Sass對(duì)于我來(lái)說(shuō)參考的教程多；

Sass有一些成熟穩(wěn)定的框架，特別是 Compass，新秀還有 Foundation 之類；

還有一個(gè)原因是國(guó)外討論 Sass 的同行要多于 LESS。

出于這幾個(gè)原因，我想我學(xué)習(xí)或者使用 Sass 更容易一些，碰到問(wèn)題更有參考資料，更有朋友幫忙解決。

該使用 SASS 還是 LESS？ - 大漠 - 知乎 - 2014-07-04

Sass 是 Ruby 語(yǔ)言寫(xiě)的，但是兩者的語(yǔ)法沒(méi)有關(guān)系。不懂 Ruby，照樣使用。不過(guò)必須要先安裝 Ruby，然后再安裝 Sass。

先從官網(wǎng)下載并安裝 ruby，在安裝的時(shí)候，請(qǐng)勾選 Add Ruby executables to your PATH 這個(gè)選項(xiàng)，添加環(huán)境變量，不然以后使用編譯軟件的時(shí)候會(huì)提示找不到 ruby 環(huán)境。

Downloads - 官網(wǎng)

安裝完 ruby 之后，在開(kāi)始菜單，找到剛才安裝的 ruby，打開(kāi)Start Command Prompt with Ruby

然后直接在命令行輸入：

gem install sass

按回車鍵確認(rèn)，等待一段時(shí)間就會(huì)提示你 Sass 安裝成功（如果因?yàn)閴Φ脑虬惭b失敗，請(qǐng)參考下面用淘寶 RubyGems 鏡像安裝 Sass）。

由于國(guó)內(nèi)網(wǎng)絡(luò)原因（你懂的），導(dǎo)致 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性連接失敗。
這時(shí)候我們可以通過(guò)source命令來(lái)配置源，先移除默認(rèn)的https://rubygems.org源：

gem source --remove https://rubygems.org/

然后添加淘寶的源https://ruby.taobao.org/:

gem source -a https://ruby.taobao.org/

然后查看一下當(dāng)前使用的源是哪個(gè)，如果是淘寶的，則比表示可以輸入 Sass 安裝命令gem install sass了。

最后使用版本查看命令確保安裝成功：

sass -v

Sass 安裝 - W3CPlus

SASS 文件就是普通的文本文件，里面可以直接使用 CSS 語(yǔ)法。文件后綴名是 .scss，意思為 Sassy CSS。

新建一個(gè) test.scss 文件，內(nèi)容為：

$blue : #1875e7;
div{
    color: $blue;
}

然后在命令行輸入下面命令，屏幕上便顯示 .scss 文件轉(zhuǎn)化的 css 代碼：

sass test.scss

如果要將顯示結(jié)果保存成文件，后面再跟一個(gè) .css 文件名：

sass test.scss test.css

那么就會(huì)默認(rèn)在當(dāng)前目錄下生成文件。

Sass 提供四個(gè)編譯風(fēng)格的選項(xiàng)：

nested: 嵌套縮進(jìn)的css代碼，它是默認(rèn)值；

expanded: 沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼；

compact: 簡(jiǎn)潔格式的css代碼；

compressed：壓縮后的css代碼。

生產(chǎn)環(huán)境當(dāng)中，一般使用最后一個(gè)選項(xiàng)。

sass --style compressed test.scss test.min.css

你還可以讓 Sass 監(jiān)聽(tīng)某個(gè)文件或目錄，一旦源文件有變動(dòng)，就自動(dòng)生成編譯后的版本。

// 監(jiān)聽(tīng)文件
// input.scss : scss文件
// output.css : 編譯后的css文件
sass --watch input.scss:output.css

// 監(jiān)聽(tīng)目錄 
// sassFileDirectory : sass文件目錄
// cssFileDirectory : 編譯后的css文件目錄
sass --watch sassFileDirectory:cssFileDirectory

Sass 編譯 - W3CPlus

Sass 的官方網(wǎng)站還提供一個(gè)在線轉(zhuǎn)換器，方便嘗試運(yùn)行各種栗子：

SassMeister | The Sass Playground！

Sass 中可以定義變量，方便統(tǒng)一修改和維護(hù)。

//sass style
//-----------------------------------
$gray: #666;
body {
  background-color: $gray;
}

//css style
//-----------------------------------
body {
  background-color: #666; 
}

Sass 可以進(jìn)行選擇器的嵌套，表示層級(jí)關(guān)系。

//sass style
//-----------------------------------
ul {    
    li {
        display: inline-block;
    }
}

//css style
//-----------------------------------
ul li {
  display: inline-block; 
}

Sass 中如導(dǎo)入其它sass文件，最后編譯為一個(gè)css文件，優(yōu)于純css的@import。

//sass style
//-----------------------------------
// reset.scss
html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

//sass style
//-----------------------------------
// test.scss
@import "reset";
body {
    font-size: 100%;
    background-color: #efefef;
}

//css style
//-----------------------------------
html,
body,
ul,
ol {
  margin: 0;
  padding: 0; 
}
body {
  font-size: 100%;
  background-color: #efefef; 
}

Sass 中可用mixin定義一些代碼片段，且可傳參數(shù)，方便日后根據(jù)需求調(diào)用。從此處理 CSS 3 的前綴兼容輕松便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing: $sizing;
       -moz-box-sizing: $sizing;
           -box-sizing: $sizing;
}
.box-border {
    border: 1px solid #ccc;
    @include box-sizing(border-box);
}

//css style
//-----------------------------------
.box-border {
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
           -box-sizing: border-box; 
}

Sass 可通過(guò) @extend 來(lái)實(shí)現(xiàn)代碼組合聲明，使代碼更加優(yōu)越簡(jiǎn)潔。

//sass style
//-----------------------------------
.bar-left {
    border: 1px solid #ccc;
}
.bar-right {
    @extend .bar-left;
    color: #999;
}

//css style
//-----------------------------------
.bar-left, .bar-right {
    border: 1px solid #ccc; 
}
.bar-right {
    color: #999; 
}

Sass 可進(jìn)行簡(jiǎn)單的加減乘除運(yùn)算等。

//sass style
//-----------------------------------
$defaultFontSize: 10px;
.msg {
    position: absolute;
    top: (800px/2);
    left: 200px + 200px;
    font-size: $defaultFontSize * 2;
}

//css style
//-----------------------------------
.msg {
    position: absolute;
    top: 400px;
    left: 400px;
    font-size: 20px; 
}

Sass 中集成了大量的顏色函數(shù)，讓變換顏色更加簡(jiǎn)單。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration: none;
    color: $linkColor;
    &:hover {
        color: darken($linkColor, 10%);
    }
}

//css style
//-----------------------------------
a {
    text-decoration: none;
    color: #08c; 
}
a:hover {
    color: #006699; 
}

Sass 共有兩種注釋風(fēng)格。

標(biāo)準(zhǔn)的 CSS 注釋 /* comment */，會(huì)保留到編譯后的文件

單行注釋 // comment，只保留在 SASS 源文件中，編譯后會(huì)被省略。

提示：在/*后面加一個(gè)感嘆號(hào)，表示這是“重要注釋”。即使是壓縮模式編譯，也會(huì)保留這行注釋。通?？梢杂糜诼暶靼鏅?quán)。

/*!
    重要注釋！
*/

CSS 預(yù)處理器的特點(diǎn)之一是可以把你的代碼分割成很多文件，而且不會(huì)影響性能。這都?xì)w功于 Sass 的@import命令，只要在你的開(kāi)發(fā)環(huán)境下，你調(diào)用不管多少文件，最終將編譯出一個(gè) CSS 樣式文件。

管理 Sass 項(xiàng)目文件結(jié)構(gòu) - 大漠 - W3CPlus

gulp-ruby-sass 是調(diào)用 sass，所以需要 ruby 環(huán)境，需要生成臨時(shí)目錄和臨時(shí)文件；

gulp-sass 是調(diào)用 node-sass，有 node.js 環(huán)境就夠了，編譯過(guò)程不需要臨時(shí)目錄和文件，直接通過(guò) buffer 內(nèi)容轉(zhuǎn)換。

gulp-ruby-sass與gulp-sass - SegmentFault

sass入門(mén) - sass教程
sass|博客自由標(biāo)簽|W3CPlus
Sass->十分鐘寫(xiě)一個(gè)Sass組件 - SegmentFault
使用Sass來(lái)寫(xiě)OOCSS - SegmentFault

以上，歡迎拍磚斧正。