什麼是Sass?

Sass是CSS前處理器的一種，其他還有less，stylus。他們的作用相同，但是語法，功能上略有差異，經過了解。我發現less相對來說更易上手，但我還是選擇了功能更為強大，語法種類更多的sass。
Sass在早期使用縮排，無法相容已有的CSS程式碼，同時這種縮排風格也跟CSS的預設習慣不同，所以雖然sass出現的早，卻沒有less普及。
後來推出了SCSS。其實他還是Sass，Sass以.sass字尾為副檔名，SCSS以.scss字尾為副檔名。Sass不支援大括號{}，使用嚴格的縮排。而SCSS的語法跟css的語法非常類似。
例子：
Sass語法：

$font
 
-stack: Helvetica, sans-serif  //定義變數
$primary-color: #333 //定義變數

body
  font: 100% $font-stack
  color: $primary-color

SCSS語法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

編譯出的CSS：

body {
  font: 100% Helvetica, sans-serif;
  color
 
: #333;
}

如何使用

配置

Sass是用Ruby語言寫的，所以要先有Ruby環境，再安裝sass。
首先安裝Ruby，然後在Ruby中輸入：

//最近的compass已經整合sass，不用單獨安裝sass
gem install compass
//然後輸入下邊指令看看是否成功安裝了compass和sass
gem list
//若sass沒安裝，再手動安裝一下
gem install sass

彆著急，耐心等待安裝完成即可使用。
Sass檔案就是普通的文字檔案，副檔名改為.sass即可。當然我們還是推薦改為.scss。這樣語法更符合css的習慣。
編輯的時候可以使用Sublime Text編輯器，安裝Sass外掛，能夠進行程式碼提示。

使用Sass控制

開啟Ruby，輸入命令進入指定資料夾，例如：

E:
cd sass

進入E盤的sass資料夾。
資料夾中的.sass檔案和.scss檔案可以相互轉換，例如：
一些常用操作命令：

//.sass檔案和.scss檔案可以相互轉換
sass-convert a.sass b.scss
//將sass檔案編譯成css檔案
sass demo.scss product.css
//還可以設定css的輸出風格
sass --style compressed test.scss test.css
//輸出樣式的風格可以有四種選擇，預設為nested
//nested：巢狀縮排的css程式碼
//expanded：展開的多行css程式碼
//compact：簡潔格式的css程式碼
//compressed：壓縮後的css程式碼

最重要最常用的，監聽命令，這樣編輯sass之後只要儲存，就會實時重新整理css：

//watch單個檔案
sass --watch test.scss:test.css
//watch資料夾   這句還沒理解？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
sass --watch app/sass:public/stylesheets

使用compass控制

安裝compass後，在Ruby中輸入：

//首先找到要建立專案的位置
E:
cd project
//建立專案
compass create myproject
//進入專案資料夾
cd myproject
//若已經有scss檔案，放入專案資料夾中的sass資料夾
//使用下邊的命令，編譯出css。該專案在根目錄下執行，會編譯所有sass資料夾中的sass檔案，並放入stylesheets資料夾中
compass compile
//預設狀態下編譯出的css檔案帶有大量的註釋。但生產環境中需要壓縮的css檔案，此時使用：
compass compile --output-style compressed
//compass只編譯發生變動的sass檔案，若要重新編譯未改動的檔案，則：
compass compile --force
//除了命令列，還可以在新建專案中的配置檔案config.rb中指定編譯模式。:expanded模式表示編譯後保留原格式，其他值還包括:nested、:compact和:compressed。進入生產階段後，就要改為:compressed模式。
output_style = :expanded
//除了上邊的一次性編譯，還可以設定監視自動編譯：
compass watch
//這樣只要sass檔案發生變化，css就實時重新整理。

compass的優勢

1.reset

//reset
@import "compass/reset"; 

2.常見css的整合

//常見的css3
@import "compass/css3"; 
//圓角
.rounded{ 
    @include border-radius(5px);
    @include border-corner-radius(top, left, 5px);
 }
 //透明度 
#opacity{
    @include opacity(0.5); 
}
//行內區塊
#inline-block {
　　　@include inline-block;
}

只要先import “compass/css3”, 之後就可以使用所有css3 的內容，如border-radius、box-shadow、gradient…等，使用方式是@include，其實是compass幫你寫好了@mixin，你只要會用就好，而compass厲害的就是會同時幫你產生各個瀏覽器相對應的css，上面那行所產生的結果：

.rounded{
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
    -o-border-radius: 5px;  
    -ms-border-radius: 5px; 
    -khtml-border-radius: 5px;  
    border-radius: 5px;
} 
#opacity{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
　　 opacity: 0.5;
}
#inline-block {
　　　　display: -moz-inline-stack;
　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　*vertical-align: auto;
　　　　zoom: 1;
　　　　*display: inline;
}

3.自動生成雪碧圖
在compass新建的專案目錄下，新建images資料夾。
在images資料夾中新建一個資料夾用於放置要合成的圖片，例如mypic資料夾。
在專案的sass資料夾下新建一個mypic.scss檔案。在其中輸入：

@charset "UTF-8";

@import "compass/utilities/sprites";  // 載入compass sprites模組
@import "mypic/*.png";                // 匯入share目錄下所有png圖片
@include all-mypic-sprites;           //在css中顯示每個圖的座標

然後在Ruby中執行：

compass watch

就能看到在images資料夾中生成了一個雪碧圖。如果報錯，注意一下圖片檔案的格式，雪碧圖只支援png格式的檔案，其他格式的檔案可以在這裡轉換格式。不能直接修改副檔名，會報錯。

之後，在stylesheets中生成了一個mypic.css檔案，裡邊就有雪碧圖中圖片的座標了。

注意：如果在mypic中增刪了圖片，要更改一下mypic.scss檔案（例如去掉分號，儲存，再加上分號，儲存。），compass才能監聽到變化。此時會重新讀取mypic資料夾中的圖片，刪除原來的雪碧圖，生成新的雪碧圖，並且更新mypic.css檔案。
另外，增刪圖片會引起一部分沒變的圖片的座標發生改變。但類名不變，所以在使用過程中增刪圖片並不會影響已經寫好的其他沒變化的圖片，可以放心使用，非常方便。