加速開發 CSS 工具: Sass

從來沒想過在開發 Web 網站過程，CSS Style 還可以程式化，設定變數來控制 CSS，今天來介紹一套用 command line 來轉換 CSS 的 Web Framework Plugin: SASS (Sassy CSS)，可以參考 SASS 的 Change log 版本差異，目前最新版本 3.0 以後開始支援 CSS3 做開發，底下先來介紹如何安裝: 作者是在 Ubuntu 10.10 的環境下安裝，利用 apt 方式先將環境需要的軟體安裝好

# 安裝 Ruby 環境
 $ sudo apt-get install ruby
 $ sudo apt-get install rake
 $ sudo apt-get install rubygems

Ruby 的安裝只需要一行指令

gem install sass

另外也可以透過 git 方式來安裝

git clone git://github.com/nex3/sass.git
cd sass
rake install

安裝好就會 bin 目錄多出了 sass sass-convert scss 3個指令，如何轉換呢？也相當容易

mv style.css style.scss 
sass --watch style.scss:style.css

style.scss 是您寫的 SASS CSS 檔案 style.css 是您要輸出的檔案名稱至於如何撰寫 Sass 語法，就請大家參考

線上手冊，文件非常清楚，相信很容易看的懂

See also