安裝Sass和Compass

Sass 是一個和 Less 類似的工具，讓css寫起更結構化也更輕鬆。其實兩個只要學會其中一個就夠了，一般人應該跟我一樣都會選 Less 吧，因為Sass的首頁看起來...不像是熟css的設計者寫出來的東西，不是非常好看，不過發現了 Compass 之後我決定改用Sass了，因為他支援很多”潛規則”，而且連縮圖(sprites)也能幫處理，非常兇猛。

安裝Compass和Sass
gem update --system
gem install compass
建立compass project
#export PATH=$PATH:/Users/sushih-wen/.gem/ruby/1.8/bin
#來試試sass語法 compass create project_name --syntax sass
設定config.rb參考官方文件說明
development開發環境設定範例，僅供參考  http_path = "/static/" css_dir = "../static/css" sass_dir = "sass" images_dir = "../static/img" javascripts_dir = "../static/js" output_style = :nested # output_style = :expanded or :nested or :compact or :compressed relative_assets = true line_comments = false preferred_syntax = :sass 當修改sass時讓compass自動編譯成css到css_dir(請先備份原始css)
compass watch
底線開頭的css不會被編譯，所以可以建立一個基本的_base.sass來給其他sass檔案引用
/* _base.sass */ @import compass/reset @import compass/css3 /* hide in phone view */ @media (max-width: 480px) .hidden-phone display: none
之後進production時壓縮css檔，用下面指令覆蓋設定  compass compile --output-style compressed --force

這類工具在自己寫的時後幫助很大，但是在測試一些別的css時就需要做轉換，沒有很爽

如果我是作者可能會增加一個@raw標籤來讓原始css語法相容

延伸閱讀：Sass and Compass in Action