SASS 使用(vs code)

2、在vs code中編譯sass

一、在拓展商店裏搜索「easy sass」，並安裝，安裝成功後點從新加載。

 

二、接下來進行配置： 在 vs code 菜單欄依次點擊「文件 首選項 設置」，打開 settings.json 全局配置文件。搜索「easysass」，而後把 easysass 相關的設置項複製到右側的用戶設置編輯窗口中，再根據實際狀況修改配置項。

通常開發環境中用到其中兩個設置項（上圖紅框處中的代碼）：

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」。

三、咱們的生產環境中，在不少狀況下 Sass 文件和 CSS 文件是不在同一個目錄下的，而Easy Sass 默認輸出的 CSS 是和當前 Sass 文件處於相同目錄的，爲此咱們須要配置輸出路徑。

easysass.targetDir 提供 CSS 輸出路徑的設置，值能夠是絕對路徑或相對路徑。例如：設置 easysass.targetDir 爲 "./css/"，此時保存修改完畢的 Sass 文件，
VSCode 會自動編譯並在當前 Sass 文件的上級文件夾 css 目錄下輸出生成 CSS 文件（見下圖）。