[外掛] VSCode 自動即時編譯器 Live Sass Compiler 安裝與輸出路徑設定

　　目前比較夯的網頁編輯器，已不再是Sublime Text而是微軟所推出的 Visual Studio Code，而相當佛心的是Visual Studio Code不但完全免費，且功能還相當的完整，甚至還整合了版控與豐富的外掛，同時在安裝外掛，也比Sublime Text來的簡單許多，因此也讓許多網頁設計，紛紛的投靠Visual Studio Code。

  雖然梅干大部分時候，還是習慣使用Sublime Text，最主要的原因就在於，先前梅干花了不少時間，在Sublime Text中建了不少的速碼，但最近因為手邊一些專案，讓梅干在寫SCSS時，就得編寫完並發佈，網頁才能讀取的到，實在有些小麻煩，因此梅干最近研究了一下，發現 Visual Studio Code有個相當好用的外掛 Live Sass Compiler，除了可即時的監控SCSS檔外，當按下儲存時，就會自動轉存成CSS，相當的方便因此有在用SCSS的朋友，Visual Studio Code這款Live Sass Compiler絕不容錯過喔！

---

Step1
在開啟了VSCode後，點一下左邊的外掛圖示，並輸入「Live Sass Compiler」的關鍵字，當找到外掛後，再按下 Install 鈕，進行安裝。

---

Step2
安裝完畢後，再回到檔案總管底下。

---

Step3
將SCSS檔案，開啟到VSCode中，接著再按下方的「Watch Sass」 。

---

Step4
這時就會看到，立即就會將SCSS轉存成CSS，並儲存在原路徑底下，由於目前正在監控，因此當編寫任何的SCSS，只需按下儲存，CSS文件也會同步更新。

---

Step5
若想改變CSS的輸出路徑時，將原目錄的.map檔案給刪除。

---

Step6
接著開啟，喜好設定 / 設定。

---

Step7
接著輸入setting，在看到Settings:Formats的項目時　點下方的編輯連結。

---

Step8
再把下方的碼貼上。

---

Step9
這時再回到原來的畫面中，再點下方的「Watch Sass」。

---

Step10
鏘～鏘～這時CSS檔案，就會儲存在CSS的目錄底下啦！因此透過VSCode的這個SASS自動編譯器，讓在寫SCSS真的超方便的啦！