[CSS] Sass & Compass 加速開發 - 環境安裝

久聞 Less, Sass, 一直沒時間好好研究, 這週花了點時間研究前端技術

Sass + Compass 是加速開發及管理 CSS 樣式表的好方法

工欲善其事, 必先利其器...先來安裝開發環境吧!

環境設定

Windows 環境

1. 安裝 Ruby

先裝 Ruby (http://rubyinstaller.org/) [p.s. Mac 使用者可以直接跳過安裝 Ruby 的步驟]

安裝過程中, 記得勾選 "Add Ruby executable to your PATH" 及 "Associate .rb and .rbw files with this Ruby installation"

接下來開啟 命令提示字元 (cmd)

首先更新一下 RubyGems -- Ruby 的套裝管理系統

gem update --system

2. 安裝 Sass 及 Compass

gem install sass
gem install compass

這樣開發環境就已備妥待續


3. 建立第一個 compass project

compass create [ProjectName]

切換到 sass-project 資料夾, 執行監控檔案變更 compass watch

新增一個 main.scss 在 scss/ 資料裡, 並做變更

main.css 就自動被產生出來囉!!!

4. 進階定義 -- config.rb 

可設定 scss, css, javascript, images 等預設資料夾名稱