Sublime Text | sass（scss）+ Compass 開發環境

如何打造一個 Windows 底下的 SASS + Compass 開發環境 by Sublime Text（主要使用 Sublime Text 2）。

1. 安裝Ruby

   Sass 是由 Ruby 程式語言寫成，因此 Windows 必先行安裝 Ruby，請至 RubyInstaller 下載安裝程式
   

2. 安裝Sass

   Ruby 環境裝好之後，使用 Start Command Prompt with Ruby 執行
   

   gem install sass

3. 安裝Compass

   gem install compass

4. 建立專案

   compass create [專案名稱]

5. 安裝 Sublime Text 需要的 packages

   • 安裝 Sublime Text Package Control
   • Ctrl + Shift + p
   • Package Control: Install Package
   • 安裝
   • SASS
   • SASS snippets
   • Compass

6. 使用 Sublime Text 來開發 Sass（Scss）

   將方才建立好的 Compass folder 轉成 Project
   Project > Add folder to Project...
   
   
   
   
   

7. Compass Watch

   .scss file 需要透過 Compass 的 Compile 指令來編譯使它成為 browser 看得懂的 .css file，而 Compass 其中的 watch 功能，則是監控 .scss 檔案，一但有了任何變動，就會自動進行 Compile 的動作轉成 css file 存至 stylesheets folder 裡面。
   
   回到 Start Command Prompt with Ruby，先輸入 cd [專案名稱] 進入方才建好的 folder，然後執行
   

   compass watch

    回到 Sublime Text 編輯 scss file，只要按下儲存 compass watch 就會自動編譯成 css，結束編輯時，只要回到 cmd 按下 Ctrl+C 就能終止 Watch。