20190423-Vscode與Sass不得不說的秘密(>^ω^<)

這是亂七八糟的前言：emmm，今天倔強的點，是關于Vscode使用easySass插件時，不安裝ruby環境，直接使用插件編譯時，不進行設定，分音是會轉譯為Css檔案的= =，神坑的後知後覺才發現是因為插件的問題，搞了近倆小時不止~

目錄

1、easySass插件的預設使用者設定

1.1檔案》首選項》設定》settings.json全局配置檔案

1.2預設使用者設定

"easysass.compileAfterSave": true,
//儲存scss/sass檔案後自動編譯
"easysass.excludeRegex": "",
//提供檔案名正規表達式，比對到的檔案會被排除，不會編譯為css，預設為空，則功能關閉
"easysass.formats": [
    {
      "format": "expanded",
      "extension": ".css"
    },
    {
      "format": "compressed",
      "extension": ".min.css"
    }
],
//編譯不同風格的css
      

1.easysass.formats[i]format用以編譯生成對應風格的css，參數值
nested：嵌套縮進的 css 代碼。
expanded：沒有縮進的、擴充的css代碼。
compact：簡潔格式的 css 代碼。
compressed：壓縮後的 css 代碼。
      

2.easysass.formats[i]extension用以設定編譯輸出的檔案拓展名
此處可以自定義檔案名，輸出的 css 檔案名會按照“目前 Sass 檔案名（不含拓展名）+此處自定義檔案名”的格式來生成

例如：設定          "easysass.formats[i].extension": ".min.css"                ，假設目前的 Sass 檔案名為

style.scss，則編譯輸出的 css 檔案名為 style.min.css      

"easysass.targetDir": ""
      

很多情況下 scss/sass 檔案和 css 檔案是不在同一個目錄下的，而 Easy Sass 預設輸出的 css 是和目前 Sass 檔案處于相同目錄的
為此我們需要通過該參數來配置輸出路徑      

1.3更改使用者設定

在相同路徑下的CSS檔案夾内生成：

"easysass.targetDir": "./css",

Sass分音導入設定：

"easysass.excludeRegex": "^_",

2、分音導入還是需要加下劃線

emmm，用VScode的easySass是不需要裝ruby環境的┓( ´∀` )┏真是喜大普奔，不過，emmm分音時還是要記得更改使用者設定，以及導入時千萬記得加上下劃線_，不然會報找不到檔案夾的錯誤！

參考文獻：

使用VScode來編譯Sass

浩瀚海平面上，是無止盡的波濤跟風平浪靜，那是一艘船，戰勝艱險與孤寂。