Netbean with SCSS

1.安裝 Ruby + Compass

在設定之前,必需先完成 Ruby 的安裝,請參閱筆者文章 [Ruby 安裝 on Window 快速指南]
(http://liaosankai.logdown.com/posts/245873-ruby-install-on-window-quick-guide)。

2. 設定 SCSS/LESS 編譯工具

Netbean 提供了 scss 和 less 的設定,這邊先以 scss 為主。從上方功能列表 Tools > Options > Miscellaneous 開啟 CSS Preprocessors 頁籤功能介面。若先前有完成了步驟一動作,直接點擊「Search」按鈕,就會自動帶入 C:\Ruby200\bin\sass.bat 字串 (依每個人安裝的位置,可能會有些微不同) 到 Sass Path 中,若沒有自動帶入 (通常是安裝時沒加入到系統環境變數),也可以改「Browser」自己指定到安裝的位置。

另外兩個勾選的選頂 Open Output on Error 表示在編譯 scss 檔案時,若遇到錯誤就會將訊息輸出在 Output 視窗中,Generate extra information (debug) 則是在產生 css 中,會加註用來除錯的相關資訊。

3. 設定專案 SCSS/LESS 編譯參數

在專案資料夾滑鼠右鍵,點擊「Properties」開啟專案設定視窗,並選擇 CSS Preprocessors 頁籤。

open-projects-properties.png

必需先勾選 Compile Sass Files on Save 後,才能設定存放 scss 來源資料夾以及存放編譯後的 css 目的資料夾。(通常會設定一組,不過也是可以多個組),接下來就是最重要的 Compiler Options (編譯參數) 部分。

css-project-properties.png

可使用參數可以參考 Sass 官方文件 Options 的部分。不過主要的參數大概就只有以下三個

  • --compass 以支援 compass 的方式編譯
  • --line 為每個 style 加註原始 scss 的檔案位置和行數
  • --style 編譯出來的 CSS 排版格式

接下來我針對了不同參數最後編譯出來的 css 樣式進行擷圖如下:

參數 --compass --style nested 的結果

style-nested.png
參數 --compass --style expanded 的結果

style-expanded.png
參數 --compass --style compact 的結果

style-compact.png
參數 --compass --style compressed 的結果

style-compressed.png
參數 --compass --line --style expanded 的結果

line.png

4. 寫 sass/scss 注意事項

若在編譯 sass/scss 出現了下列的錯誤

Syntax error: Invalid CP950 character "\xE4" on line 7 of C:\mystyle.scss Use --trace for backtrace.

表示文件中含有非 ASCII 碼的字元(中文)存在,所以必需在文件加上 @charset "UTF-8"; 就可以避免此錯誤的發生

目錄

  1. 1. 1.安裝 Ruby + Compass
  2. 2. 2. 設定 SCSS/LESS 編譯工具
  3. 3. 3. 設定專案 SCSS/LESS 編譯參數
  4. 4. 4. 寫 sass/scss 注意事項