很多設計師使用某種形式的CSS預處理器，不管是Sass，或Stylus。如果你使用過這些，你大概也知道，Compass是一個框架，建立在Sass，雖然它的安裝可能會倒胃口，一旦你使用它，你很快就會發現，這是最好的工具之一，任何網頁設計師可以學習。
如果你從來沒有使用Sass，我建議先看一看Sass的介紹 。
Compass 就是Sass的一個框架。當你在進行一個大型項目的架構的時候遇到一些你力所能及的問題的時候，CSS就是一個挑戰。Compass試圖解決這些問題。
Compass是什么？
正如我上面所說，Compass是一個框架，協助CSS解析語言的一些問題。它還包括一些工具，使開發更快，更容易：
1、像Sass，Compass支持變量，混入和嵌套功能;
2、 它提供了一系列的圖像，顏色，排版和更多的輔助功能;
3、它支持數學計算;
4、它有助于確保跨瀏覽器兼容性。
Sass和其他網頁設計工具一樣，Compass是只是一種工具，使網站的設計更簡單。
如何安裝Compass
Compass是一個動態語言包，所以為了安裝它，你首先需要在你的電腦上安裝動態語言程序。幸運的是，動態語言的 安裝很簡單，在Windows上，你只需根據網站的操作提示下載這個動態語言程序的Windows安裝包并安裝到你的電腦上即可。
一旦你已經安裝動態語言，安裝Compass一樣容易：
gem install compass
這將即同時安裝了Compass和Sass兩個程序。
如果你希望創建一個Compass項目，只要鍵入：
compass create /path/to/project cd /path/to/project compass watch
這三行代碼的意思是，任何時候你只要改變了Sass文件，他們都將會被自動編譯成CSS。
或者，您可以使用Codekit（Mac）或Prepros（Windows）中保存時選擇將文件保存為Sass文件。
Compass入門
Compass分為模塊，因而在開始進行設計操作之前我們首先需要我們想要的模塊導入到我們的面板SCSS文件上。例如，我們使用CSS3模塊導入：
@import "compass/css3";
現在我們可以開始使用Compass提供的新特性，來導入css3并進行使用。這樣做的好處是我們不必要像css3那樣一遍又一遍地鍵入芯片供應商代碼。
下面我們來看一下如何使用Compass設計一個20px的3欄布局，在css中設計的時候我們需要鍵入以下代碼：
div { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; }
但是借助于Compass和Sass我們僅僅需要鍵入以下內容：
div
{
@include column-count(3);
@include column-gap(20px);
}
你可以發現Compass是如何的快速與完整。正如你所看到的那樣，Compass去除了一些計算機專用代碼而將原本需要6行才能寫完的程序使用2行代碼即可完成。
CSS的另一個特點是需要大量的書寫與漸變。譬如說寫一個簡單的白色到黑色的漸變：
.gradient { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000)); background-image: -webkit-linear-gradient(#ffffff, #000000); background-image: -moz-linear-gradient(#ffffff, #000000); background-image: -o-linear-gradient(#ffffff, #000000); background-image: linear-gradient(#ffffff, #000000); }
但如果使用Compass設計相同的效果很簡單，只要：
.gradient
{
@include background-image(linear-gradient(#fff, #000));
}
這不僅大大減少了代碼書寫量，而且如果你想改變顏色，在Compass的版本中，你只需要改變他們一次。
Compass也包括一些輔助項的鏈接，其最大的特點是使程序員節省很多時間。首先，我們需要的排版模式開始我們的主要Sass文件包括：
@import "compass/typography"
排版模塊有很大的速記造型的顏色，像這樣：
a
{
// link colors (normal, hover, active, visited, focus)
@include link-colors(red, blue, grey, red, blue);
}
這就是Compass最出色的地方，它給我們每天書寫的程序帶來了簡約版本，使更多的程序員節省了很多編寫代碼的時間。