自動編譯sass的工具有很多，比如說gulp，grunt，fis等等，如果只是做sass的編譯的話，沒有必要安裝配置各種環境，只需要簡單插件或者小工具即可實現，sass中文網提供的Ruby方法相對比較復雜，還各種配置，很容易出錯。本文主要介紹了兩個方法：1.使用vscode擴展；2.使用koala編譯。
Vscode中自動編譯sass和配置
只需要在vscode編輯器中安裝擴展插件就可以很輕松實現。
這里推薦的插件有兩個：Sass和Easy Sass：
1. Sass：系統默認的提示只會對.scss文件進行代碼高亮顯示，同時也能喚起系統的css代碼提示，所以如果使用sass的后綴是.scss這種的，系統自帶的會進行提示，不需要安裝，如果是用.sass這種的話，就需要安裝了，否則沒有任何提示和高亮哦。
2. Easy Sass：當ctrl+s保存的時候，自動編譯SASS / SCSS的擴展插件。默認情況下，ctrl+s保存的時候，會在sass文件相同的目錄下會生成兩個css文件，一個是壓縮過的（XXX.min.css），一個是沒有壓縮的（xxx.css）。
Sass這里不再過多介紹，重點說下Easy Sass，Easy Sass提供四個設置選項，需要修改的話，在設置面板中進行對應的修改即可：
easysass.compileAfterSave：保存后啟用或禁用自動編譯
easysass.formats：指定導出文件的擴展名和格式。
easysass.targetDir：為生成的文件定義目標目錄。
easysass.excludeRegex：使用正則表達式從編譯中排除文件
很多時候，如果sass文件和css文件都放在一起，不方便我們管理，往往很多人都會把sass和css文件分開不同的文件夾，如圖：
例如：修改為把編譯之后的css單獨放在一個css文件夾中。Ctrl+, 打開設置面板，左側找到擴展，點擊安裝好的EasySass configuration，找到targetDir，在下方輸入 ./css/ 即可：
當然，也可以直接在settings.json（這個文件在設置中任意一插件里面都可以找到）中手動添加一個參數也是可以的。
“easysass.targetDir”: “./css/“
注意：
這里需要注意下，我們修改完配置之后，實際是用的時候，sass文件夾和css文件夾還是需要手動創建，不然不會生效的哦！
所有配置擴展詳細說明：
Ø easysass.compileAfterSave 保存 scss 或 sass 文件后自動進行編譯。默認為 true。一般設為 true，可提高工作效率，如果項目中有不直接編譯的文件，例如 variable.scss、theme.scss、mixin.scss 等，建議設為 false，避免這類文件編輯保存后被編譯為無效 css 需要手動刪除的尷尬。
Ø easysass.excludeRegex 提供一個文件名的正則表達式，匹配的文件會被排除，不會被編譯成 css。默認為空，即該功能關閉。個人建議將一些不直接編譯的文件以下划線開頭命名，例如：mixin.scss，然后設置："easysass.excludeRegex": "^+"，即可排除所有以下划線開頭的 scss/sass 文件。
Ø easysass.formats 定義輸出 css 文件的排版風格和文件名，是一個數組，可以同時編譯輸出多個不同風格、文件名的 css 文件。每個數組對象中有兩個參數：
easysass.formats[i].format 用以編譯生成對應風格的 css，參數值如下：
nested：嵌套縮進的 css 代碼。
expanded：沒有縮進的、擴展的css代碼。
compact：簡潔格式的 css 代碼。
compressed：壓縮后的 css 代碼。
Ø 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 文件處於相同目錄的，為此我們需要通過該參數來配置輸出路徑。參數值可以是絕對路徑或相對路徑。如果是相對路徑，則以 VSCode 當前打開的項目的根目錄為基准。