SASS 使用(vs code)


二、在vs code中編譯sass

1、在拓展商店里搜索“easy sass”,並安裝,安裝成功后點重新加載。

 

2、接下來進行配置: 在 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”。

3、我們的生產環境中,在很多情況下 Sass 文件和 CSS 文件是不在同一個目錄下的,而Easy Sass 默認輸出的 CSS 是和當前 Sass 文件處於相同目錄的,為此我們需要配置輸出路徑。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM