Sass是一套生成CSS的工具,支援變數、函數、繼承等功能,讓我們能更輕鬆地組織及維護CSS樣式表。
Compass則是一套簡化Sass編寫方式的工具,不僅可以自動補足CSS前綴詞,解決瀏灠器相容性的問題,還能將圖示合併成Sprite大圖,Compass mixins更是幫我們節省編寫的時間。
這篇文章包括了如何安裝Sass與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專案。
Post a comment