簡單究好 Simple is Best

網頁前端開發資訊

CSS開發工具(Sass + Compass)的環境安裝教學及基本操作

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打勾。

install ruby

 

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

err

開啟「Start Command Prompt with Ruby」視窗

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

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

Start-Command-Prompt-with-Ruby

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

 

安裝sass

直接輸入以下命令

gem install sass

gem-install-sass

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

sass -v

check-sass-version

 

安裝compass

gem update --system
gem install compass

gem-update

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-creating-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-watching-project

結束Compass專案

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

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

compass-stopping-project

Post a comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *