建置 SASS 開發環境有效縮短CSS撰寫時間

安裝Ruby環境：

由於Sass是採用Ruby程式語言所寫的，因此系統需先安裝Ruby環境才能使用，因此得先到Ruby官網下載並安裝。(下載https://www.ruby-lang.org/zh_tw/documentation/installation/#rubyinstaller)

安裝Sass：

開啟命令視窗，輸入gem install sass指令，再按Enter鍵。

安裝Compass：

安裝好Sass後，接著再輸入gem install compass指令。

建立SASS專案：

首先，進到要開發專案的目錄下。
再輸入compass create project001指令。
建制完成後，會看到以下的畫面。
接著到剛所指定的專案目錄下，就會看到以下的資料夾與檔案。

Sublime Text安裝Sass：

接著開啟Sublime Text編輯器，按Ctrl + Shift +P鍵，再輸入install。
輸入sass關鍵字，再點下方的清單。
當安裝完成後，下方就會出現成功的訊息，再重覆以上步驟，分別再安裝SASS snippets、Compass二個套件。

Sublime Text使用Sass：

都完成後，就可開始來寫Sass囉!首先，進到Sublime Text後，再選擇Project / Add Folder to Project選項。
選擇剛所建立好的專案目錄。

 選擇完畢後，再選擇View / Show Side Bar選項。

接著左側就會出現專案的目錄，sass是儲放原始檔的目錄，而stylesheets是轉存好的css檔。
按Alt+Shift+2，將畫面一分為二，再個別載入檔案，一個是原檔，另一個是轉出後的CSS檔。

開啟命令視窗，進入該專案的目錄下，再輸入compass watch指令，並請勿關閉此視窗，由於它會自動監控，每當Sublime Text一儲存時，就會立即轉存成css檔。
這時可看到，右邊立即就會呈現出，左邊所寫的結果。

千萬要記得，別把命令視窗給關閉了，否則會無法即時的轉檔喔!

解決中文註解發生錯誤 Error: Invalid CP950 character   

參考，可以到 Ruby 的安裝目錄，找到如我的『C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.20\lib\sass.rb』，打開後，在所有 require 的最後一個後面
require ...
require 'sass/features'

加入這行
Encoding.default_external = Encoding.find('utf-8')    <----這行

再重新編譯即可。

如果使用compass 監控 scss 的時候噴出錯誤 Invalid CP950 character, 那就是因為Ruby的預設語言不認得UTF-8格式。有一陣子因為使用 fire.app 的關係就不會有UTF-8問題，但前兩天因為大量使用compass/css3, 在跑 fire.app 編譯速度太慢的問題，想說測試原生compass監控看會不會比較快，剛好就遇到這個問題。

只要的專案底下把設定檔 C:\xampp\htdocs\sass\project001\config.rb 打開，在最前端添加
   
Encoding.default_external = 'utf-8'

這樣重新 compass watch 就可以了。本來使用在scss最前方添加
   
@charset "UTF-8";

雖然也是可以解決噴錯誤的問題。但有一個缺點就是假設有兩支scss，裡面都有中文註解如
a.scss
   
@charset "UTF-8";

//中文註解
.container {
  font-family: "微軟正黑體";
  @import "b";　//若非得在使處引用_b.scss
}

 _b.scss
   
@charset "UTF-8";

.box {
  //中文註解
}

那就會噴出錯誤
   
Error: @charset may only be used at the root of a document.

告訴你 @charset 指令必須使用在檔案最前方。而因為_b.scss 不使用 @charset “UTF-8”;  會發生錯誤，所以還是建議改全域設定檔 config.rb 比較好。