{%hackmd /au2gfdvHR0mEjvR_NzROqA?both %}

###### tags: `編輯器`

[VS Code] 在 VSCode 上使用 SCSS 進行開發
===

[TOC]

## 參考影片

- [直播切版 - 純 CSS 特效分享 (毛玻璃、幾何線框、Bootstrap 自訂變數)](https://www.youtube.com/watch?v=SmFxwLRSulM)
- [切版範例](https://github.com/Wcc723/hexschool_201808_livedemo)

## 步驟

1. VSCode 安裝好 [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
2. 創一個scss資料夾、css資料夾、「.vscode資料夾」
3. 然後在「.vscode資料夾」內新增一個「settings.json」，不能有錯字..要一樣

> 
> 如果沒意外會長這樣..進到了類似設定VSCODE的地方，然後右邊是你自己的設定。

4. 然後我們可以在左邊找到剛剛安裝的Live Sass Compiler套件，可以在這邊找到一段原始設定：

> 

// Set your exported CSS Styles, Formats & save location.
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": null
  }
],

可以看到預設並不是壓縮後的CSS

然後我們的目的是要透過右邊的設定複寫左邊的，

所以可以參考志誠老師貼的以及模仿它原本的程式碼，得出以下這段

// Set your exported CSS Styles, Formats & save location.
{
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "~/../css/"
    }
  ]
}

5. 都儲存後就可以來到scss的檔案夾，新增一隻任意的scss，按下右下角的Watch Sass，就會成功輸出了~~

6. 之後只要一直保持Watching的狀態就會自動偵測我們對scss檔案的改動囉...