# Live Sass Compiler

>[竹白記事本](https://chupainotebook.blogspot.com/)

###### tags:`VSCode` `Visual Studio Code`

## VSCode 編譯 SASS 工具

>[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)

原本編譯 SASS 需要使用前端自動化工具（例如 Gulp、Webpack 等），或是額外的編輯程式（例如　prepos）。而 Live Sass Compiler 套件，可以直接在 VSCode 內編譯 SASS。

使用 Live Sass Compiler 前，必須先安裝 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 套件。

另外 Live Sass Compiler 內建 Autoprefix 後處理器，不需要另外安裝。

### 1. 配置

#### 1.1 `liveSassCompile.settings.formats`

設定輸出的 CSS 格式與儲存位置。

預設：

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": null
  },
],

屬性說明：
- `format`：編譯後的 CSS 格式。
- `expanded` 未壓縮（可閱讀）
- `compressed` 壓縮（體積小，專案上線用）
- 另外還有 `compact`、`nested` 但用不太到
- `extensionName`：編譯後的副檔名。
- 壓縮的會命名成 `.min.css`
- `savePath`：儲存路徑，預設為 `null`，編譯後的檔案會放在與 SASS 同個目錄
- `/`：相對根目錄，例如 `/dist/css`
- `~`：相對於每個 SASS 檔案，例如 `~/../css/`

假設我們將 `sass` 檔案放在一個 `sass` 資料夾。


要將編譯後的檔案輸出到 `css` 資料夾。而且另外產生一個專案上線用的 CSS 檔案，輸出到 `style` 資料夾。

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "/style"
  },
  {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "/style"
  }
],


#### 1.2 `liveSassCompile.settings.excludeList`

排除特定檔案，不執行編譯。

預設：

"liveSassCompile.settings.excludeList": [ 
    "**/node_modules/**",
    ".vscode/**" 
]

#### 1.3 `liveSassCompile.settings.generateMap`

是否產生 `.map` 檔案。

預設為 `true`：

"liveSassCompile.settings.generateMap": true

#### 1.4 `liveSassCompile.settings.autoprefix`

設定 `autoprefix` 後處理器。

"liveSassCompile.settings.autoprefix": [
  "> 1%",
  "last 2 versions"
 ]

- 瀏覽器市佔率
- 支援最新的版本數

### 3. 我的設置

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/style"
    }
  ],
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
  ],
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ],
}