Eclipse - Compass Plugin 安裝、使用 ( Install Compass plugin for Eclipse )

相信很多人已經了解 Compass 的方便性，今天要介紹在 Eclipse 裡使用 Compass Plugin 來增加開發的速度。

安裝 Compass Plugin：
首先確認你的工作環境是否安裝好 Compass ( 未安裝的朋友可以參考這裡 )。接著開啟 Eclipse 安裝 Compass Plugin，選擇 Eclipse Marketplace > 搜尋 Compass Plugin，選擇之後即可開始安裝，參考如下圖：

設定 Compass 執行檔所在路徑：
於 Eclipse 偏好設定 > Compass Preference，將你安裝的路徑輸入，預設值如下圖：

建立 Compass 專案：
安裝完 Compass 之後，接著在你 Web 專案的資料夾底下建立 Compass 專案。例如我的專案資料夾為 /Sandbox，Web 專案名稱為 CompassApp，所以我們要將 Compass 專案的檔案建立於該資料夾下與 /src、/WebContent 同層。於 /Sandbox 路徑底下輸入 compass create CompassApp，參考下圖：

檔案分佈如下：

編輯 Compass 設定檔：
透過該設定檔 ( Config.rb ) 可以指定 Compass 編譯過的檔案輸出位置。例如我想將 CSS 檔案輸出至 /WebContent/css 資料夾底下，參數設定如下：

編譯 SCSS 檔案：
於 /sass 資料夾底下將你想要的 CSS 內容輸入後，點擊 Compass Plugin 按鈕，如下圖：

Compass - on 為啟動 Compass ( 有時候要按兩次才會啟動 )，Compass - off 為停止 watch，啟動 watch 後可以看到 Console 有編譯的訊息。參考如下圖：

如此一來你就看到 WebContent 資料夾底下多出了 css 資料夾與編譯過的 CSS 檔案，參考如下圖：

以上就是 Compass Plugin 的安裝、使用方法。其他 Eclipse 相關教學可以參考本篇整理。