Sass是一套生成CSS的工具，支援變數、函數、繼承等功能，讓我們能更輕鬆地組織及維護CSS樣式表。
Compass則是一套簡化Sass編寫方式的工具，不僅可以自動補足CSS前綴詞，解決瀏灠器相容性的問題，還能將圖示合併成Sprite大圖，Compass mixins更是幫我們節省編寫的時間。

這篇文章包括了如何安裝Sass與Compass，還有如何建立、開啟以及監控Compass專案的方法。

• 安裝Ruby
• 安裝Sass
• 安裝Compass
• 新增Compass專案
• 開啟Compass專案
• 結束Compass專案

安裝Ruby

Windows 的使用者，可以直接到http://rubyinstaller.org/downloads/下載RubyInstaller，下載完成之後，直接執行安裝就可以了。64位元的使用者、記得要將add ruby executables to your PATH打勾。

 

在一般的情況下，我們可以使用”命令提示字元”視窗來輸入指令。win 7的使用者在安裝ruby時，如果沒有將add ruby executables to your PATH打勾，會導致接下來的指令動作無法完成，這時候我們可以開啟「Start Command Prompt with Ruby」來使用。

開啟「Start Command Prompt with Ruby」視窗

「Start Command Prompt with Ruby」簡單來說就是支援Ruby 的命令提示字元。

在win 7為例：按下Win 7 的開始功能表圖示，接著在「搜尋程式及檔案」欄位中輸入”ruby”，找到「Start Command Prompt with Ruby」並開始執行。

接下來我們要在這個視窗中輸入指令，進行sass與compass的安裝，以及建立與監控compass專案。

 

安裝sass

直接輸入以下命令

gem install sass

安裝之後您可以輸入以下指令以確認是否成功安裝

sass -v

 

安裝compass

gem update --system
gem install compass

新增Compass專案

假設我們要在D槽建立一個名為sass的專案資料夾，那麼我們就要先在D槽建立sass資料夾，接著將路徑切換到D槽的sass資料夾後，再下指令建立Compass專案。

以下是我們要輸入的指命

d:
md sass
cd sass
compass create

compass create是直接在在 sass 底下建立專案，如果我們使用compass create project 則是在sass底下新增一個project的資料夾、並在project資料夾底下建立專案。

 

 

開啟並監控既有的專案

Compass專案建立之後，在專案資料夾內會出現一個config.rb檔案。這個config.rb就是專案的設定檔。當我們要Compass監控某一個專案時、就要讓Compass監控這個設定檔所在的資料夾。

假設我們要監控的專案設定檔位置是：D:\sass2\project\config.rb

那麼我們要進行以下的指令

d:
cd sass2\project
compass watch

或是

d:
cd sass2
compass watch project

完成之後會看到以下的訊息：

>>> Compas is watching for changes. Press Ctrl-C to Stop.

結束Compass專案

只要按下 Ctrl + C，視窗就會問您要終止批次工作嗎 (Y/N)?

這時候只要指入y並按下Enter就可以成功停止監控Compass專案。