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

An Sheng Huang
Oct 8, 2018 · 6 min read

相信有使用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的資料夾

接著進入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重新調整成,你可透過這個屬性將輸出的路徑調整成是你習慣的資料夾。

更改輸出樣式

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

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

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

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

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

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store