摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內網絡原因你懂的，導致存放在上面的資源文件間歇性連接失敗。嵌套可以進行選擇器的嵌套，表示層級關系。重要注釋管理項目文件結構預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。

Sass 是 Syntactically Awesome Style Sheets 的縮寫，它是CSS的 一個開發工具，提供了很多便利和簡單的語法，讓CSS看起來更像是一門語言，這種特性也被稱為“CSS預編譯” 。它的主要涉及思想是讓我們可以按照編程的思路編寫自己的樣式，然后通過“編譯器”生成我們所需要的CSS文件。

官網

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

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

語法書寫方式不同。
Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號“{}”和分號“；”，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

PS：本文只討論 SCSS。

SCSS 與 Sass 異同 - Sass 中文文檔

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

SASS用法指南 - 阮一峰

Sass、LESS 和 Stylus 簡單對比

三者都是開源項目；

Sass 誕生是最早也是最成熟的 CSS 預處理器，有 Ruby 社區和 Compass 支持；Stylus 是早期服務器 NodeJS 項目，在該社區得到一定支持者；Less 出現于2009年，支持者遠超遠于 Ruby 和NodeJS社區；

Sass 和 LESS 語法較為嚴謹、嚴密，而Stylus語法相對散漫，其中 LESS 學習起來更快一些，因為他更像CSS的標準；

Sass 和 LESS 相互影響較大，其中 Sass 受 LESS 影響，已經進化到了全面兼容 CSS 的 SCSS；

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

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

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

CSS 預處理的缺點

個人感覺CSS 預處理器語言那是程序員的玩具，想通過編程的方式跨界解決 CSS 的問題。可以說 CSS 應該面臨的問題一個也少不了，只是增加了一個編譯過程而已，簡單來說 CSS 預處理器語言較 CSS 玩法變得更高級了，但同時降低了自己對最終代碼的控制力。更致命的是提高了門檻，首先是上手門檻，其次是維護門檻，再來是團隊整體水平和規范的門檻。這也造成了初學學習成本的昂貴。

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

我選擇 Sass 的原因：

Sass也是成熟的 CSS 預處理器之一，而且又有一個穩定，強大的團隊在維護；

Sass對于我來說參考的教程多；

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

還有一個原因是國外討論 Sass 的同行要多于 LESS。

出于這幾個原因，我想我學習或者使用 Sass 更容易一些，碰到問題更有參考資料，更有朋友幫忙解決。

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

Sass 是 Ruby 語言寫的，但是兩者的語法沒有關系。不懂 Ruby，照樣使用。不過必須要先安裝 Ruby，然后再安裝 Sass。

先從官網下載并安裝 ruby，在安裝的時候，請勾選 Add Ruby executables to your PATH 這個選項，添加環境變量，不然以后使用編譯軟件的時候會提示找不到 ruby 環境。

Downloads - 官網

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

然后直接在命令行輸入：

gem install sass

按回車鍵確認，等待一段時間就會提示你 Sass 安裝成功（如果因為墻的原因安裝失敗，請參考下面用淘寶 RubyGems 鏡像安裝 Sass）。

由于國內網絡原因（你懂的），導致 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性連接失敗。
這時候我們可以通過source命令來配置源，先移除默認的https://rubygems.org源：

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

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

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

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

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

sass -v

Sass 安裝 - W3CPlus

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

新建一個 test.scss 文件，內容為：

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

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

sass test.scss

如果要將顯示結果保存成文件，后面再跟一個 .css 文件名：

sass test.scss test.css

那么就會默認在當前目錄下生成文件。

Sass 提供四個編譯風格的選項：

nested: 嵌套縮進的css代碼，它是默認值；

expanded: 沒有縮進的、擴展的css代碼；

compact: 簡潔格式的css代碼；

compressed：壓縮后的css代碼。

生產環境當中，一般使用最后一個選項。

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

你還可以讓 Sass 監聽某個文件或目錄，一旦源文件有變動，就自動生成編譯后的版本。

// 監聽文件
// input.scss : scss文件
// output.css : 編譯后的css文件
sass --watch input.scss:output.css

// 監聽目錄 
// sassFileDirectory : sass文件目錄
// cssFileDirectory : 編譯后的css文件目錄
sass --watch sassFileDirectory:cssFileDirectory

Sass 編譯 - W3CPlus

Sass 的官方網站還提供一個在線轉換器，方便嘗試運行各種栗子：

SassMeister | The Sass Playground！

Sass 中可以定義變量，方便統一修改和維護。

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

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

Sass 可以進行選擇器的嵌套，表示層級關系。

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

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

Sass 中如導入其它sass文件，最后編譯為一個css文件，優于純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定義一些代碼片段，且可傳參數，方便日后根據需求調用。從此處理 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 可通過 @extend 來實現代碼組合聲明，使代碼更加優越簡潔。

//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 可進行簡單的加減乘除運算等。

//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 中集成了大量的顏色函數，讓變換顏色更加簡單。

//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 共有兩種注釋風格。

標準的 CSS 注釋 /* comment */，會保留到編譯后的文件

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

提示：在/*后面加一個感嘆號，表示這是“重要注釋”。即使是壓縮模式編譯，也會保留這行注釋。通常可以用于聲明版權。

/*!
    重要注釋！
*/

CSS 預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。這都歸功于 Sass 的@import命令，只要在你的開發環境下，你調用不管多少文件，最終將編譯出一個 CSS 樣式文件。

管理 Sass 項目文件結構 - 大漠 - W3CPlus

gulp-ruby-sass 是調用 sass，所以需要 ruby 環境，需要生成臨時目錄和臨時文件；

gulp-sass 是調用 node-sass，有 node.js 環境就夠了，編譯過程不需要臨時目錄和文件，直接通過 buffer 內容轉換。

gulp-ruby-sass與gulp-sass - SegmentFault

sass入門 - sass教程
sass|博客自由標簽|W3CPlus
Sass->十分鐘寫一個Sass組件 - SegmentFault
使用Sass來寫OOCSS - SegmentFault

以上，歡迎拍磚斧正。