使用 VSCode 編輯器來編譯 Sass

VSCode 是繼 Sublime Text三、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 相關的設置項複製到右側的用戶設置編輯窗口中，再根據實際狀況修改配置項。

通常生產環境中用到其中兩個設置項（上圖紅框處中的代碼）：

1. /** Easy Sass 插件 **/

2. "easysass.formats": [

3. {

4. "format": "compressed", // 壓縮

5. "extension": ".css"

6. }

7. ],

8. "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 等。

做者： WingMeng  連接：http://www.imooc.com/article/19624 來源：慕課網 本文原創發佈於慕課網 ，轉載請註明出處，謝謝合做！