[VS Code 擴充套件] 使用 Live Sass Compiler 套件自動編譯 SASS/SCSS

分享:

SASS/SCSS 是寫 CSS 的好幫手,不過一般要寫的話都需要先安裝好相關的環境才能開始寫,不過還好 VS Code 有人就開發出可以直接自動編譯的套件 Live Sass Compiler,安裝後就算不弄環境也可以直接撰寫 SASS/SCSS 了。

首先可以先從套件那邊尋找 Live Sass Complier,或是到官網下載

 

安裝完成後就可以開始來寫 SASS/SCSS 了,接著我們在專案資料夾內開啟一個新的資料夾叫做 SCSS,然後建立一個副檔名為 .scss 的檔案。

 

接著在裡面撰寫簡單的 SCSS 如下,如果要知道更多用法可以參考我之前寫過的教學

$primary: #30c39e;

.primary{
    color: $primary;
}

 

因為瀏覽器是無法讀取 scss 檔的,所以我們需要編譯,這時只要按下 VS Code 下方的 Watch Sass 就可以了:

然後我們在 scss 的資料夾就能看到編譯完成的 css 檔。

 

這時就能連結該 css 檔來使用,不過為了專案的管理方便,可以設定把 css 檔產在其他資料夾,接著我們就打開 VS Code 的設定,然後找到 Live Sass Compiler 的地方後按下 Edit in setting.json

 

在裡面加上這段設定要儲存 css 的路徑:

{
    "liveSassCompile.settings.formats":[
        {
            "savePath": "/css"
        }
    ]
}

之後產出的 css 都會在 /css 的資料夾內了。

接著在網頁裡再去連結編譯後的 css 檔,就可以即時看到編譯後的結果了。

如果要關閉自動產生 SCSS 的話,只要按下下面同一個位置的 Watching... 的地方就好了。

 

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。