會以 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 預處理器，幫你完成高效率的修改吧！

• 什麼是::before和::after？CSS偽元素怎麼用[實作範例]
• CSS position 屬性教學：relative和absolute實作
• RWD教學-只要兩行就能輕鬆見效的實作經驗