這篇要來教你用 VS Code 插件 Live Sass Compiler 來快速將 SCSS 轉換成 CSS 檔！
會以 SCSS 為主而非 SASS 原因是個人習慣看有大括號的樣式檔，因此雖然安裝插件和設定檔不分 SASS 或 SCSS ，但本篇介紹文內容會以 SCSS 為主噢！
熟悉 CSS 之後為什麼會想學預處理器 SCSS 呢？主要是考慮到如何在主管或客戶要求：「做另一個版本把藍色主色換成綠色、圓角少一點、陰影重一點看看！」
遇到這種要求的時候，如果只有純 CSS ，要改的地方可就多了。
預處理器 SCSS 的好處就是這些改檔案的需求可以用變數來處理，雖然預處理器可以寫函數，功能相當強大，但對初學者來說光是學會將顏色、圓角、陰影這些歸納成變數，就已經是網頁設計福音了！
會想撰寫這篇就是因為，我當時光是環境設定和輸出路徑也搞了一陣子@@
讓我手把手帶你設定一遍吧！
內容目錄
建立 SCSS 檔案
首先我們先在建立檔案的地方新增檔案，下圖中是我用xampp所以路徑在xampp下的htdocs，
雖然我建立的是.php檔案，但.html的靜態網站也可以，完全不影響這次教學的插件安裝設定。
然後我們要先建立好scss和css資料夾，我們設定時主要只會用到這2個資料夾來測試有沒有成功設定好路徑噢。
接著在scss資料夾中新增一個style.scss檔案。
SCSS 寫入測試用的樣式內容
再來我們可以在scss檔案中寫下簡單的測試樣式：
/* 用$開頭設定scss變數 */
$color: red;
/* 使用scss設定的變數 */
body{
background: $color;
}scss好處就是我們可以使用$錢字號來設定變數，測試樣式我們用顏色來當範例。
使用時前面只要前面有加上$就會帶變數進來，這樣要改的時候就只要改變數內容，就可以統一將所有網頁的顏色改變了，超方便的吧！
寫好之後就來安裝「 Live Sass Compiler 」插件，讓 VS Code 自己幫你把scss編譯並生成css吧！
安裝 VS Code 插件 Live Sass Compiler
「Live Sass Compiler」 這個插件，可以讓你在每次存檔的時候，就自動幫你從scss轉換到css一次，因此第一次轉換後還可以同時開啟scss和轉換好的css檔案，未來還可以即時比對轉換結果。
我們到 「 延伸模組 」 > 找「Live Sass Compiler」 > 按下「安裝」按鈕。
安裝好之後，再來要進入設定檔案來設定輸出路徑等相關設定囉！
開啟 VS Code 的設定檔案
修改 VS Code 「受限模式」為「信任」
通常想要在 VS Code 開啟設定檔案 settings.json 檔案前，你需要先將左下角的受限模式改成信任，因此我們到左下角點一下「受限模式」開啟模式設定。
點選「信任」按鈕。
再來我們就可以放心去開啟設定檔囉！
開啟 VS Code 設定檔
選擇左上角的「檔案」 > 「喜好設定」 > 「設定」。
開啟後會出現下面這個畫面，我們直接找選單中「延伸模組」 > 「Live Sass Compiler」 > 找到Formats的「在settings.json內編輯」按鈕點下去。
再來就是直接在設定檔中，手動打上你想要設定的內容。
手動設定輸出路徑
點下去後可以打上以下程式碼：
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
}
]
其中，savePath就是scss自動編譯成css檔案的輸出路徑囉！
當時 savePath 這條設定我搞半天都沒有效，最後是發現前面要多個 ~/ 符號才設定成功，這符號有些是用在「應用程式根目錄」，如果單純的 / 符號是從網站根目錄，不過有些網路範例並沒有寫到 ~/ 符號就能有效果。
補充：
format：指編譯後的 CSS 格式。
expanded 未壓縮
compressed 壓縮
extensionName：指檔案編譯後產生的副檔名。
到這邊基本設定就完成了，開始來測試自動轉換的強大功能吧！
測試將scss轉換成css檔
我們回到scss檔案，右下角因為安裝了 Live Sass Compiler 插件而出現了 Watch Sass 按鈕。
如果你的插件才剛安裝好，卻沒有出現這個按鈕時，通常重新啟動 VS Code 就會出現囉。
那我們就按下 Watch Sass 按鈕。
緊接著會跳出一塊視窗，顯示「Watching…」，這就表示已經成功啟用插件，並且開始監聽你的程式，只要你在scss檔案中按下存檔，就會自動幫你轉換成css檔案囉！
所以這邊我們就按下存檔吧。
存檔後出現下圖畫面，紅色框起來的地方就是轉換成css檔案後存放的位置，也就是我們剛剛設定的輸出路徑！
因此我們可以到檔案總管去看看有沒有成功製造出css檔案了。
這樣就能看到插件自動幫你生成好css檔案，並放在指定的資料夾中了！
你可以看到除了css檔案外，還有另一個.map檔案，這個檔案只是這個插件生成的路徑檔，不想生成的話只要到settings.json輸入以下語法就可以不生成.map檔了。
"liveSassCompile.settings.generateMap": false
務必記得你在設定檔中，
每一個項目之間要有「,」逗號當作間隔噢！
scss完成轉換後的css檔案呈現
最後就來看看成果吧！
我們把css檔案打開，原本的$color就自動替換成我們設定的顏色囉！
使用scss新手疑問
這邊多給我們的讀者一個新手容易遇到的小問題，大部分去看介紹文章可以看到許多用法，像是@mixin、@include等引用的基本用法。
這邊要介紹的小技巧是在使用上更基本，但新手容易出錯的用法：#{變數}
我們先把scss和css檔案同時開啟就能比較出問題點：
上圖可以發現，$ax-header-h: 66px; 是我原先自訂的一個變數。
當我想要用css的內建運算公式calc()語法，但如果只寫下面這樣：
/* 會轉換失敗的寫法 */
height: calc(100vh - $ax-header-h);是沒有辦法成功被轉換的！
這時候要使用#和{ }把變數包起來，像下面這樣的程式碼寫法：
/* 成功轉換的scss寫法 */
height: calc(100vh - #{$ax-header-h});就可以順利轉換囉！
總結
以上就是這篇使用 VS Code 的 Live Sass Compiler 插件，自動編譯 SCSS 成 CSS 檔案，並且把編譯後的檔案放置在你指定的位置中。
未來再也不怕主管或客戶突然想更換網頁顏色，否則100個頁面要改上百個顏色真的會頭昏昏腦脹脹，使用 SASS 或 SCSS 預處理器，幫你完成高效率的修改吧！
