#### Sass > 簡單說，Compass是Sass的工具庫（toolkit）。 Sass本身只是一個編譯器，Compass在它的基礎上，封裝了一系列有用的模塊和模板，補充Sass的功能。它們之間的關系，有點像Javascript和jQuery、Ruby和Rails、python和Django的關系。 Sass Compass是用Ruby語言開發的，所以安裝它之前，必須安裝Ruby。 ```javascript gem install compass gem install sass compass create myproject cd myproject compass watch ``` 你會看到，里面有一個config.rb文件，這是你的項目的配置文件。還有兩個子目錄sass和stylesheets，前者存放Sass源文件，后者存放編譯后的css文件。 #### Compass的模塊 Compass采用模塊結構，不同模塊提供不同的功能。目前，它內置五個模塊： - reset - css3 - layout - typography - utilities 其中css3模塊會讓你的css 代碼自動加上前綴等兼容性寫法，雖然現有的一些自動化工具能做到，但是還是非常的nice ``` #inline-block { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; *display: inline; zoom: 1; } ``` #### Helper函數 除了模塊，Compass還提供一系列函數。 有些函數非常有用，比如image-width()和image-height()返回圖片的寬和高。 再比如，inline-image()可以將圖片轉為data協議的數據。 ``` @import "compass"; .icon { background-image: inline-image("icon.png");} ``` #### 資料 [詳見官網](http://compass-style.org/reference/compass/css3/) [阮一峰的Compass用法指南](http://www.ruanyifeng.com/blog/2012/11/compass.html)