建置 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 比較好。

留言

這個網誌中的熱門文章

c語言-關於#define用法

CMD常用網管指令

使用windows CMD 時間自動校正