幾個月前，我介紹了Sass的用法。
Sass是一種"CSS前處理器"，可以讓CSS的開發變得簡單和可維護。但是，只有搭配Compass，它才能顯出真正的威力。
本文介紹Compass的用法。毫不誇張地說，學會了Compass，你的CSS開發效率會上一個臺階。
本文假設你已經掌握了CSS的主要用法，如果你還懂Sass，那就更好了。但是不懂Sass，一樣可以閱讀本文。
一、Compass是什麼？
簡單說，Compass是Sass的工具庫（toolkit）。
Sass本身只是一個編譯器，Compass在它的基礎上，封裝了一系列有用的模組和模板，補充Sass的功能。它們之間的關係，有點像Javascript和jQuery、Ruby和Rails、python和Django的關係。
二、安裝
Compass是用Ruby語言開發的，所以安裝它之前，必須安裝Ruby。
假定你的機器（Linux或OS X）已經安裝好Ruby，那麼在命令列模式下鍵入：
sudo gem install compass
如果你用的是Windows系統，那麼要省略前面的sudo。
正常情況下，Compass（連同Sass）就安裝好了。
三、專案初始化
接下來，要建立一個你的Compass專案，假定它的名字叫做myproject，那麼在命令列鍵入：
compass create myproject
當前目錄中就會生成一個myproject子目錄。
進入該目錄：
cd myproject
你會看到，裡面有一個config.rb檔案，這是你的專案的配置檔案。還有兩個子目錄sass和stylesheets，前者存放Sass原始檔，後者存放編譯後的css檔案。
接下來，就可以動手寫程式碼了。
四、編譯
在寫程式碼之前，我們還要知道如何編譯。因為我們寫出來的是字尾名為scss的檔案，只有編譯成css檔案，才能用在網站上。
Compass的編譯命令是
compass compile
該命令在專案根目錄下執行，會將sass子目錄中的scss檔案，編譯成css檔案，儲存在stylesheets子目錄中。
預設狀態下，編譯出來的css檔案帶有大量的註釋。但是，生產環境需要壓縮後的css檔案，這時要使用--output-style引數。
compass compile --output-style compressed
Compass只編譯發生變動的檔案，如果你要重新編譯未變動的檔案，需要使用--force引數。
compass compile --force
除了使用命令列引數，還可以在配置檔案config.rb中指定編譯模式。
output_style = :expanded
:expanded模式表示編譯後保留原格式，其他值還包括:nested、:compact和:compressed。進入生產階段後，就要改為:compressed模式。
output_style = :compressed
也可以透過指定environment的值（:production或者:development），智慧判斷編譯模式。
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令列模式下，除了一次性編譯命令，compass還有自動編譯命令
compass watch
執行該命令後，只要scss檔案發生變化，就會被自動編譯成css檔案。
更多的compass命令列用法，請參考官方文件。
五、Compass的模組
Compass採用模組結構，不同模組提供不同的功能。目前，它內建五個模組：
* reset
* css3
* layout
* typography
* utilities
下面，我依次介紹這五個內建模組。它們提供Compass的主要功能，但是除了它們，你還可以自行載入網上的第三方模組，或者自己動手編寫模組。
六、reset模組
通常，編寫自己的樣式之前，有必要重置瀏覽器的預設樣式。
寫法是
@import "compass/reset";
上面的@import命令，用來指定載入模組，這裡就是載入reset模組。編譯後，會生成相應的css reset程式碼。
七、CSS3模組
目前，該模組提供19種CSS3命令。在這裡，我介紹其中的三種：圓角、透明和行內區塊。
7.1 圓角
圓角（border-radius）的寫法是
@import "compass/css3";
.rounded {
@include border-radius(5px);
}
上面的@include命令，表示呼叫某個mixin（類似於C語言的宏），5px是引數，這裡用來指定圓角的半徑。
編譯後的程式碼為
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
如果只需要左上角為圓角，寫法為
@include border-corner-radius(top, left, 5px);
7.2 透明
透明（opacity）的寫法為
@import "compass/css3";
#opacity {
@include opacity(0.5);
}
編譯後生成
#opacity {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity: 0.5;
}
opacity的引數0.5，表示透明度為50%。
完全透明的寫法是
@include opacity(0);
完全不透明則是
@include opacity(1);
7.3 行內區塊
行內區塊（inline-block）的寫法為
@import "compass/css3";
#inline-block {
@include inline-block;
}
編譯後生成
#inline-block {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
八、layout模組
該模組提供佈局功能。
比如，指定頁面的footer部分總是出現在瀏覽器最底端：
@import "compass/layout";
#footer {
@include sticky-footer(54px);
}
又比如，指定子元素佔滿父元素的空間：
@import "compass/layout";
#stretch-full {
@include stretch;
}
九、typography模組
該模組提供版式功能。
比如，指定連結顏色的mixin為：
link-colors($normal, $hover, $active, $visited, $focus);
使用時寫成：
@import "compass/typography";
a {
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}
十、utilities模組
該模組提供某些不屬於其他模組的功能。
比如，清除浮動：
import "compass/utilities/";
.clearfix {
@include clearfix;
}
再比如，表格：
@import "compass/utilities";
table {
@include table-scaffolding;
}
編譯後生成
table th {
text-align: center;
font-weight: bold;
}table td,
table th {
padding: 2px;
}table td.numeric,
table th.numeric {
text-align: right;
}
十一、Helper函式
除了模組，Compass還提供一系列函式。
有些函式非常有用，比如image-width()和image-height()返回圖片的寬和高。
再比如，inline-image()可以將圖片轉為data協議的資料。
@import "compass";
.icon { background-image: inline-image("icon.png");}
編譯後得到
.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}
函式與mixin的主要區別是，不需要使用@include命令，可以直接呼叫。
（完）