VS2017 上使用 SCSS

小弟不才，昨晚看高手 Coding 才知道有 SCSS 這東西，馬上就請咕狗大神教學！發現這真的是發現新大陸等級的東西呀～


於是便馬上用臉書敲了我的大學朋友，聊起這個話題。
後來發現他老早就再用了...(已知用火)
他也很大方的指導我如何在 VS2017 上寫 SCSS

紀錄一下：

Step1:

準備好 Visual Studio 2017 並安裝完成

Step2:

下載 web compiler 這個發表在 marketplace 的插件

Step3:

關閉 VS2017 程式，並進行 web compiler 安裝

Step4:

建立一支副檔名為 .scss 的檔案，對該檔案點選右鍵即可進行編譯輸出成 CSS 囉！

Step5:

如要修改 SCSS 編譯後 CSS 的輸出位置，可找到「compilerconfig.json」進行修改

Step6:

都設定好之後，未來如果有修改 .scss 檔案內容的話，直接按下存檔就會自動編譯囉！

至於從 CSS 改用 SCSS 的好處嘛...這篇

只能說...「瑞凡，我們回不去了！」

---

題外話：
圖片如果沒有經過 CSS 處理，預設會是 display:inline 的狀態，
這時候如果外層套了個只有背景色的 div ，
會發現圖片無法完整貼齊 div，會有一絲絲縫隙。
這時只須把圖片改成 display:block 即可。