VSCode 是繼 Sublime Text3、Atom 後另一個讓我愛不釋手的編輯器，其顏值和外掛生態圈與 Atom 不相上下，但比後者用起來更加絲滑流暢（Atom 需要4G+記憶體和SSD 才能逆天），所以自然成了我目前首選的編輯器。

前端專案自然少不了和 Sass 打交道，VSCode 提供了豐富的相關外掛來幫助我們處理 Sass 相關任務。我用的是 Easy Sass 這款外掛，目前最新版本是 0.0.6。

由於 Sass 的編譯依賴 Ruby 環境，因此我們在開始之前首先得安裝 Ruby，別擔心，裝 Ruby 只是為了提供執行環境，不懂 Ruby 沒任何關係。官網下載傳送門

安裝 Ruby 時一定要勾選 Add Ruby executables to your PATH，用來將 Ruby 新增到系統變數，這樣後續可以省卻很多不必要的麻煩。裝好後在命令列輸入 gem sass 來安裝 Sass，安裝完成後啟動 VSCode，在拓展商店裡搜尋“easy sass”，並安裝，安裝成功後重啟 VSCode。

接下來進行配置。在 VSCode 選單欄依次點選“檔案 首選項 設定”，開啟 settings.json 全域性配置檔案。搜尋“easysass”，然後把 easysass 相關的設定項複製到右側的使用者設定編輯視窗中，再根據實際情況修改配置項。

一般生產環境中用到其中兩個設定項（上圖紅框處中的程式碼）：

/** Easy Sass 外掛 **/"easysass.formats":[{"format":"compressed",// 壓縮"extension":".css"}],"easysass.targetDir":"./"// 自定義css輸出檔案路徑

其中 easysass.formats 是設定編譯輸出的 css 風格的，可以同時編譯輸出多個不同風格的 CSS 檔案，此處我只設定了一個 easysass.formats 專案，所以編譯時只生成一個 CSS 檔案。

easysass.formats[i].format 支援四個選項用以編譯生成對應風格的 CSS：
　　 nested：巢狀縮排的 css 程式碼。
　　 expanded：沒有縮排的、擴充套件的css程式碼。
　　 compact：簡潔格式的 css 程式碼。
　　 compressed：壓縮後的 css 程式碼。
easysass.formats[i].extension 顧名思義就是設定編譯輸出的檔名了，此處可以自定義檔名，輸出的 CSS 檔名會按照“當前 Sass 檔名（不含拓展名）+此處自定義檔名”的格式來生成。例如：設定 easysass.formats[i].extension 為 ".min.css"，假設當前的 Sass 檔名為“style.scss”，則編譯輸出的 CSS 檔名為“style.min.css”。

我們的生產環境中，在很多情況下 Sass 檔案和 CSS 檔案是不在同一個目錄下的，而Easy Sass 預設輸出的 CSS 是和當前 Sass 檔案處於相同目錄的，為此我們需要配置輸出路徑。

easysass.targetDir 提供 CSS 輸出路徑的設定，值可以是絕對路徑或相對路徑。例如：設定 easysass.targetDir 為 "./css/"，此時儲存修改完畢的 Sass 檔案，VSCode 會自動編譯並在當前 Sass 檔案的上級資料夾 css 目錄下輸出生成 CSS 檔案（見下圖）。

本文所述的只是採用 VSCode 編輯器編譯生成 CSS 的一種方式，可能比較原始，實際生產環境中大多采用自動化構建方案，比如 grunt、gulp、fis 等。