使用VSCode外掛自動編譯SASS/SCSS
相信有使用Sass或Scss寫網頁樣式的人都已經習慣使用相關的指令編譯。但對初次學習寫Code的朋友來說,下指令無疑會產生一些不適應感。或是對指令不熟悉,每次編譯還得再Google一輪。前陣子剛好有朋友詢問在VSCode編輯器設定編譯Sass的流程,這也讓我重啟了同樣的疑問:
是否有辦法能夠在不需下任何指令的情況下,就能自動地把Sass/Scss編譯成CSS呢?
其實是有的,今天要來推薦一個在Visual Studio Code上相當簡單實用的外掛,Live Sass Compiler。你可以在Visual Studio Code的擴充功能裡搜尋Sass即可找到。
找到後安裝流程跟其他外掛無異,按下「安裝」->「重新載入」即可啟用外掛。
重新載入後,依造以下步驟一起來嘗試看看它的用法吧!
- 首先建立一個資料夾。
- 透過Visual Studio Code的檔案總管開啟剛才建立的資料夾。
(提示:點選視窗左上角檔案總管的大圖示,點選「開啟資料夾」) - 開啟後在資料夾內建立一層名為scss的資料夾,並於scss資料夾內建立一個名為style.scss的檔案,寫入以下的範例程式碼:
很明顯這是一個scss的檔案,具有變數、巢狀結構、占位選擇器等特徵,沒有經過編譯是無法直接使用的。這個時候我們剛才安裝的Live Sass Compiler就派上用場了!注意一下在視窗下方藍色區域是否出現了一個小小的按鈕寫著Watch Sass。如果沒找到的話,對應下圖所示的區域。
這個按鈕即是Live Sass Compiler的即時編譯啟動按鈕,點擊「Watch Sass」看看能跑出什麼結果吧!
點擊「Watch Sass」後,你將可以在scss檔案所在的資料夾內看到編譯後的style.css檔案,且每一次儲存檔案都會自動編譯一次。
如果你想要停止即時編譯的狀態,點擊視窗下方的「Watching…」即可停止。
預設的情況編譯產生的CSS將會被放置在與SCSS檔案同層的資料夾內,若是你想要進一步指定CSS輸出路徑,或是輸出的形式,不妨依循以下的步驟一起來嘗試一下。
指定輸出CSS的路徑
我們先把剛才所產生的.css與.map檔案移除,保留style.scss。並於檔案總管內另外新增一層名為css的資料夾:
📁css
📁scss
📄style.scss
接著進入Visual Studio Code的喜好設定->設定:
若你的作業系統是Windows,可從左上角的「檔案」選單內找到「喜好設定」選項。
因近期Visual Studio Code介面改版了,我們需使用傳統json的格式打開設定檔案,開啟方法如下圖所示:
最後,你將可以看到以下的畫面:
在這個畫面裡,你可以調整編輯器以及外掛相關的設定,但這裡我不多做贅述,你可直接將以下的程式碼複製並貼到右方的區塊存檔:
LiveSassCompile.settings.formats可用於調整Live Sass Compiler外掛相關的屬性設定,而savePath則描述輸出後的CSS檔案會被自動放在哪個資料夾內。
儲存設定檔後,重新按下「Watch Sass」讓我們看看這次CSS會從哪裡跑出來!
現在編譯後的CSS檔案被輸出到了css資料夾內,就是因為剛才我們已經將Live Sass Compiler的輸出路徑透過savePath重新調整成"/css"
,你可透過這個屬性將輸出的路徑調整成是你習慣的資料夾。
更改輸出樣式
Live Sass Compiler支援以下四種輸出樣式:expanded(預設)、compact、compressed與nested。
我們可將輸出樣式調整成另一種最常見的compressed(即是去除檔案所有空格及縮排的輸出格式)來試試看。
將以下的程式碼貼入喜好設定檔案,並再次存擋:
這次透過屬性format
指定了輸出的樣式為compressed
,可以看到CSS檔案的呈現方式就是無空格與縮排的格式,你也可以將format
指定為上述提到的其他三種樣式來試試看。
以上就是對於Live Sass Compiler的操作流程整理,若是你想了解更多的話,可由以下的連結進入外掛的說明文件內找到更多的資訊:
我是從事網站開發前端工程的Andy,若你覺得這篇文章有幫助到你,不妨按個拍手給予鼓勵或分享給有興趣的朋友們知道!