使用VSCode外掛自動編譯SASS/SCSS

相信有使用Sass或Scss寫網頁樣式的人都已經習慣使用相關的指令編譯。但對初次學習寫Code的朋友來說,下指令無疑會產生一些不適應感。或是對指令不熟悉,每次編譯還得再Google一輪。前陣子剛好有朋友詢問在VSCode編輯器設定編譯Sass的流程,這也讓我重啟了同樣的疑問:

是否有辦法能夠在不需下任何指令的情況下,就能自動地把Sass/Scss編譯成CSS呢?

其實是有的,今天要來推薦一個在Visual Studio Code上相當簡單實用的外掛,Live Sass Compiler。你可以在Visual Studio Code擴充功能裡搜尋Sass即可找到。

Live Sass Compiler可從Visual Studio Code的擴充功能內找到

找到後安裝流程跟其他外掛無異,按下「安裝」->「重新載入」即可啟用外掛。

重新載入後,依造以下步驟一起來嘗試看看它的用法吧!

  1. 首先建立一個資料夾。
  2. 透過Visual Studio Code的檔案總管開啟剛才建立的資料夾。
    (提示:點選視窗左上角檔案總管的大圖示,點選「開啟資料夾」)
  3. 開啟後在資料夾內建立一層名為scss的資料夾,並於scss資料夾內建立一個名為style.scss的檔案,寫入以下的範例程式碼:
在檔案總管內建立一個名為scss的資料夾,並於其中建立一個scss檔案

很明顯這是一個scss的檔案,具有變數、巢狀結構、占位選擇器等特徵,沒有經過編譯是無法直接使用的。這個時候我們剛才安裝的Live Sass Compiler就派上用場了!注意一下在視窗下方藍色區域是否出現了一個小小的按鈕寫著Watch Sass。如果沒找到的話,對應下圖所示的區域。

一旦你安裝好Live Sass Compiler並重新載入後,即可在視窗下方的藍色區域找到即時編譯啟動按鈕「Watch Sass」

這個按鈕即是Live Sass Compiler的即時編譯啟動按鈕,點擊「Watch Sass」看看能跑出什麼結果吧!

點擊「Watch Sass」隨即開始編譯

點擊「Watch Sass」後,你將可以在scss檔案所在的資料夾內看到編譯後的style.css檔案,且每一次儲存檔案都會自動編譯一次。

如果你想要停止即時編譯的狀態,點擊視窗下方的「Watching…」即可停止。

點擊Watching…取消即時編譯

預設的情況編譯產生的CSS將會被放置在與SCSS檔案同層的資料夾內,若是你想要進一步指定CSS輸出路徑,或是輸出的形式,不妨依循以下的步驟一起來嘗試一下。

指定輸出CSS的路徑

我們先把剛才所產生的.css與.map檔案移除,保留style.scss。並於檔案總管內另外新增一層名為css的資料夾:

📁css
📁scss
📄style.scss
建立一個名為css的資料夾

接著進入Visual Studio Code的喜好設定->設定:

若你的作業系統是Windows,可從左上角的「檔案」選單內找到「喜好設定」選項。

因近期Visual Studio Code介面改版了,我們需使用傳統json的格式打開設定檔案,開啟方法如下圖所示:

最後,你將可以看到以下的畫面:

在這個畫面裡,你可以調整編輯器以及外掛相關的設定,但這裡我不多做贅述,你可直接將以下的程式碼複製並貼到右方的區塊存檔:

寫入新的savePath

LiveSassCompile.settings.formats可用於調整Live Sass Compiler外掛相關的屬性設定,而savePath則描述輸出後的CSS檔案會被自動放在哪個資料夾內。

儲存設定檔後,重新按下「Watch Sass」讓我們看看這次CSS會從哪裡跑出來!

調整savePath後,編譯的檔案就會被放到指定的./css資料夾

現在編譯後的CSS檔案被輸出到了css資料夾內,就是因為剛才我們已經將Live Sass Compiler的輸出路徑透過savePath重新調整成"/css",你可透過這個屬性將輸出的路徑調整成是你習慣的資料夾。

更改輸出樣式

Live Sass Compiler支援以下四種輸出樣式:expanded(預設)、compact、compressed與nested。

我們可將輸出樣式調整成另一種最常見的compressed(即是去除檔案所有空格及縮排的輸出格式)來試試看。

將以下的程式碼貼入喜好設定檔案,並再次存擋:

將以上設定更新至喜好設定中,重新調整輸出CSS的檔案樣式為compressed
設定format為compressed後,編譯後的CSS就沒有了多餘的空格與縮排

這次透過屬性format指定了輸出的樣式為compressed,可以看到CSS檔案的呈現方式就是無空格與縮排的格式,你也可以將format指定為上述提到的其他三種樣式來試試看。

以上就是對於Live Sass Compiler的操作流程整理,若是你想了解更多的話,可由以下的連結進入外掛的說明文件內找到更多的資訊:

我是從事網站開發前端工程的Andy,若你覺得這篇文章有幫助到你,不妨按個拍手給予鼓勵或分享給有興趣的朋友們知道!