Compass用法指南
幾個月前，我介紹了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
除了一次性編譯命令，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命令，可以直接調用。
（完）