在 Sublime Text 3 將 Sass 編譯成 CSS

在 動畫互動網頁程式入門（HTML/CSS/JS）上，吳哲宇老師使用 Sass 當作 CSS 的預處理器，可以設定變數、利於 Nesting、引入 Mixins 等等優點，比起純 CSS 還要方便好用。剛好 Frontend Intermediate Course 中的第三週作業就是要用預處理器寫 CSS，於是想要在 Sublime 上面設定 Sass，並將 Sass 編譯成 CSS。

在 Sublime 上面把 Sass 編譯成 CSS 比我想像還要麻煩，本來以為只要在 Sublime 上面安裝 Sass 套件就可以了，結果根本不是這樣子（我太天真的啊...）

Google 搜尋之後發現還需要安裝 SASS Build 套件才可以將 Sass 編譯成 CSS。當我以為這樣就完成安裝設定後才發現，不是只在 Sublime 上面安裝那兩個套件，還要在電腦安裝 Ruby 跟 Sass 才可以，我果然是太天真了...

於是就努力的研究一下到底要怎麼安裝設定才可以，以下是我自己的設定過程，如果需要比較詳細的教學，我在 YouTube 上面發現 Peter Sommerhoff 教學影片還不錯 Sass Beginner Tutorial，可惜是在我差不多都設定完成之後才看到。


我的作業系統是 Windows，所以以下安裝設定過程只適合 Windows。

1. 先在 Sublime 上利用 Package Control 安裝 Sass 、 SASS Build 跟 SublimeOnSaveBuild，當然前提是你有先安裝 Sublime 的 Package Control，需要 Package Control 安裝教學可以參考保哥的文章：Sublime Text 3 新手上路。

2. Sass 依賴 Ruby 環境，所以要先安裝 Ruby，到官網下載 Ruby Downloads，我不確定應該安裝哪個版本，因為我的筆電是 64-bit，所以就選了最新版本的 64-bit 安裝。這邊要注意安裝時要將第二個選項打勾：

3. 安裝 Sass。先開啟 Start Command Prompt with Ruby

然後輸入：

gem install sass

如果要檢查是否安裝成功可以輸入：

sass -v

如果有出現 Sass 版本那就表示已安裝成功。

4. 將 Sass 編譯成 CSS。到目前為止，環境配置都已經完成。在 Tools -> Build System -> SASS。

然後開啟 Sass 檔案，按下 Ctrl + B 就會將檔案編譯成 CSS，可是編譯出的 CSS 檔案會跟 Sass 檔案在同一個資料夾中。

5. 如果想要把 CSS 檔案自動編譯到另一個 CSS 資料夾中，要進一步設定。在到 Sublime 裡，選 Tools -> Build System -> New Build System。

將下面的程式碼貼上：

{

 "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
 "selector": "source.sass, source.scss",
 "line_regex": "Line ([0-9]+):",

 "osx":
 {
  "path": "/usr/local/bin:$PATH"
 },

 "windows":
 {
  "shell": "true"
 }

}

另存新檔到下面路徑內：

C:\ Users\***\AppData\Roaming\Sublime Text 3\Packages\User

檔名可以隨你喜好（只要是英文檔名），但是附檔名一定要是 .sublime-build。
重開 Sublime 後，然後在 Tools -> Build System -> （剛才你創的檔名，我的是 Build to CSS Directory）。

在你工作的檔案夾內創一個 CSS 檔案夾，然後在 Sublime 開啟 Sass 檔案，按 Ctrl + B，就會發現 CSS 檔案會直接編譯到 CSS 檔案夾內。

6. 這樣就成功在 Sublime 上將 Sass 檔編譯成 CSS 了，不過在編譯的過程，如果你的 Sass 檔案有中文字，要加上 @chartset "UTF-8"，否則會出現編譯失敗的訊息。

7. 因為有安裝 SublimeOnSaveBuild 套件，所以每次 Sass 存檔時就會自動編譯更新 CSS 檔，如果沒有，那就要手動按 Ctrl + B 才會編譯更新。
不過 SublimeOnSaveBuild 會編譯 Sass 子文件（partials），所以還要另外設定，在 Preferences -> Package Settings -> SublimeOnSaveBuild -> Settings - User，然後貼上這一段程式碼：

{
    "filename_filter": "(/|\\\\|^)(?!_)(\\w+)\\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

之後記得存檔，這樣 SublimeOnSaveBuild 就不會編譯 Sass 子文件的 CSS 檔案。
不過要記得在主要的 Sass 檔案中 @import "子文件檔名"，不然會出現編譯錯誤的訊息。


大概就是這樣子，對於熟悉電腦的人可能是非常簡單的事情，但對於我來說，有點複雜，希望可以幫到有同樣需求的人。


參考文章：
Sublime Text 配置 Sass
Get Sass Working in Sublime Text for Windows in 8 Steps