邂逅Sass與Compass之Compass篇

本文主要講解Compass的內容，眾所周知Compass是Sass的工具庫，如果對Sass不甚了解的同學可以移步邂逅Sass和Compass之Sass篇Sass本身只是一個“CSS預處理器”，Compass在它的基礎上，封裝了一系列的模組和模板，補充了Sass的功能。

1.Compass的安裝

和Sass一樣，Compass也是用Ruby語言開發的，所以在安裝Sass之前必須先安裝Ruby，安裝Ruby的過程就不再贅述，安裝好Ruby後可以直接在命令列輸入下面的命令

<code>sudo gem install compass
</code>

windows在cmd中輸入，但是要省略前面的sudo。

正常情況下，Compass(連同Sass)就安裝好了。

2.Compass初始化一個專案

接下來，要建立一個屬於我們自己的Compass項目，假定它的名字叫做learn-compass-init，那麼在命令列輸入

<code>compass create learn-compass-init
</code>

在目前的目錄下就會產生一個learn-compass-init子目錄（提示：windows玩家可以在需要建立的檔案中按住shift+滑鼠右鍵選擇在此處開啟命令列視窗）。

進入剛剛建立的子目錄

<code>cd learn-compass-init
</code>

你會看到如下結構，其中config.rb文件，是專案的設定檔。還有兩個子目錄sass和stylesheets，前者存放我們需要寫的Sass源文件，後者存放編譯後的css文件

3.Compass編譯一個專案

了解Sass的都知道，我們寫的後綴名為scss的文件只有編譯成css文件，才能用在我們的網站上，所以Compass提供了一系列的編譯指令。 在專案的根目錄運行如下命令

<code>compass compile
</code>

會將Sass子目錄中的後綴名scss檔案編譯成css文件，並儲存在stylesheets子目錄中。

有人會說修改一次scss檔就需要執行一遍compass compile太過麻煩，所以compass也提供了自動編譯指令如下

<code>compass watch
</code>

執行該指令後，只要scss檔發生修改，就會自動編譯成stylesheets子目錄中對應css檔。

預設狀態下，編譯出來的css文件會帶有大量的註釋，但是我們的只需要壓縮後的css文件，這時就需要使用如下命令

<code>compass compile --output-style compressed
</code>

4.Compass中的模組

Comapss採用模組結構，不同的模組提供不同的功能，我們在開發中可以按需來引入模組，下面我將著重講述一下各個模組的主要功能。

Compass內建了六大模組,其中包括如下

<code>-   reset
-   css3
-   layout
-   typography
-   utilities
-   helpers
</code>

Reset模組：是瀏覽器的重置模組，減少瀏覽器的差異性，即重置瀏覽器間的差異性。

Layout模組：提供了頁面佈局的控制能力，例如講一個容器內的子元素橫向縱向佔滿。

值得注意的是，只有Reset模組和Layout模組是需要明確指定引入的，即只要@import "compass" 就可以引入其他模組。

css3模組：提供了跨瀏覽器的css3的能力，相信你用過以後再也不會因為加瀏覽器前綴而頭疼不已。

Helpers模組：內含一系列的函數，跟Sass中的函數列表很像（用的很少但是功能很強大）。

Typography模組：修飾文字的樣式，垂直韻律。

Utilities模組：可以說Compass將沒有辦法放到其他模組的內容都放在這個模組裡。

其實Compass也提供了Browser Support的方法：它主要用於配置Compass預設支援哪些瀏覽器，對於指定的瀏覽器預設支援到哪一個版本，一旦修改就會影響其他六個模組的輸出，需要針對不同的瀏覽器做不同的適配。

關於各個模組使用辦法以及特色我將會在下面的文章中一一講述。