【程式筆記】快速建構Compass環境

前言

最近看到了閃光洽在PHPConf.TW 2011介紹的3SSS，便讓我決心要踏入這條不歸路好好研究樣式界的神兵：Compass，小弟是從css起家的，不更上層樓恐怕將被時代洪流淹沒，所以先就環境架設為文一篇。

安裝

windows

安裝RubyInstaller for Windows

$ gem install compass

Linux

$ sudo apt-get install rubygems
$ sudo gem install compass

常用指令

建立專案

$ compass create  

編譯檔案

$ compass compile

監控並自動編譯檔案

$ compass watch

轉換現有檔案格式

$ sass-convert -F [格式] -T [格式]

參數	格式
-F	css、sass、scss、less
-T	sacc、scss

Plugins

可參考compass-plugins

960 Grid System

$ gem install compass-960-plugin

請見 https://github.com/nextmat/compass-960-plugin

HTML5 Boilerplate

$ gem install html5-boilerplate

請見 http://github.com/sporkd/compass-html5-boilerplate

Fancy Buttons

$ gem install fancy-buttons

請見 https://github.com/imathis/fancy-buttons

TWITTER BOOTSTRAP

$ gem install compass_twitter_bootstrap

請見 https://github.com/vwall/compass-twitter-bootstrap

後記

有了工作環境，放手去玩吧！套件使用方法請直接參考各頁面說明。

延伸閱讀

• Compass
• Sass
• CSS/SASS/Compass Presentation