使用VSCode外掛自動編譯SASS/SCSS
相信有使用Sass或Scss寫網頁樣式的人都已經習慣使用相關的指令編譯。但對初次學習寫Code的朋友來說，下指令無疑會產生一些不適應感。或是對指令不熟悉，每次編譯還得再Google一輪。前陣子剛好有朋友詢問在VSCode編輯器設定編譯Sass的流程，這也讓我重啟了同樣的疑問：
是否有辦法能夠在不需下任何指令的情況下，就能自動地把Sass/Scss編譯成CSS呢？
其實是有的，今天要來推薦一個在Visual Studio Code上相當簡單實用的外掛，Live Sass Compiler。你可以在Visual Studio Code的擴充功能裡搜尋Sass即可找到。
找到後安裝流程跟其他外掛無異，按下「安裝」->「重新載入」即可啟用外掛。
重新載入後，依造以下步驟一起來嘗試看看它的用法吧！
- 首先建立一個資料夾。
- 透過Visual Studio Code的檔案總管開啟剛才建立的資料夾。
(提示：點選視窗左上角檔案總管的大圖示，點選「開啟資料夾」) - 開啟後在資料夾內建立一層名為scss的資料夾，並於scss資料夾內建立一個名為style.scss的檔案，寫入以下的範例程式碼：
很明顯這是一個scss的檔案，具有變數、巢狀結構、占位選擇器等特徵，沒有經過編譯是無法直接使用的。這個時候我們剛才安裝的Live Sass Compiler就派上用場了！注意一下在視窗下方藍色區域是否出現了一個小小的按鈕寫著Watch Sass。如果沒找到的話，對應下圖所示的區域。
這個按鈕即是Live Sass Compiler的即時編譯啟動按鈕，點擊「Watch Sass」看看能跑出什麼結果吧！
點擊「Watch Sass」後，你將可以在scss檔案所在的資料夾內看到編譯後的style.css檔案，且每一次儲存檔案都會自動編譯一次。
如果你想要停止即時編譯的狀態，點擊視窗下方的「Watching…」即可停止。
預設的情況編譯產生的CSS將會被放置在與SCSS檔案同層的資料夾內，若是你想要進一步指定CSS輸出路徑，或是輸出的形式，不妨依循以下的步驟一起來嘗試一下。
指定輸出CSS的路徑
我們先把剛才所產生的.css與.map檔案移除，保留style.scss。並於檔案總管內另外新增一層名為css的資料夾：
📁css
📁scss
📄style.scss
接著進入Visual Studio Code的喜好設定->設定：
若你的作業系統是Windows，可從左上角的「檔案」選單內找到「喜好設定」選項。
因近期Visual Studio Code介面改版了，我們需使用傳統json的格式打開設定檔案，開啟方法如下圖所示：
最後，你將可以看到以下的畫面：
在這個畫面裡，你可以調整編輯器以及外掛相關的設定，但這裡我不多做贅述，你可直接將以下的程式碼複製並貼到右方的區塊存檔：
LiveSassCompile.settings.formats可用於調整Live Sass Compiler外掛相關的屬性設定，而savePath則描述輸出後的CSS檔案會被自動放在哪個資料夾內。
儲存設定檔後，重新按下「Watch Sass」讓我們看看這次CSS會從哪裡跑出來！
現在編譯後的CSS檔案被輸出到了css資料夾內，就是因為剛才我們已經將Live Sass Compiler的輸出路徑透過savePath重新調整成"/css"，你可透過這個屬性將輸出的路徑調整成是你習慣的資料夾。
更改輸出樣式
Live Sass Compiler支援以下四種輸出樣式：expanded(預設)、compact、compressed與nested。
我們可將輸出樣式調整成另一種最常見的compressed（即是去除檔案所有空格及縮排的輸出格式）來試試看。
將以下的程式碼貼入喜好設定檔案，並再次存擋：
這次透過屬性format指定了輸出的樣式為compressed，可以看到CSS檔案的呈現方式就是無空格與縮排的格式，你也可以將format指定為上述提到的其他三種樣式來試試看。
以上就是對於Live Sass Compiler的操作流程整理，若是你想了解更多的話，可由以下的連結進入外掛的說明文件內找到更多的資訊：
我是從事網站開發前端工程的Andy，若你覺得這篇文章有幫助到你，不妨按個拍手給予鼓勵或分享給有興趣的朋友們知道！
