Live Sass Compiler(Visual Studio Code 擴充功能):讓 VSCode 支援即時編譯 SASS/SCSS 成 CSS

2019/03/20 3,682 0 軟體應用 , 網站技術 , CSS , Sass/SCSS

「Visual Studio Code」是由微軟(Microsoft)開發的開放原始碼程式編輯器

VSCode 只要安裝「Live Sass Compiler」這個擴充功能就能支援即時編譯 Sass 成 CSS,就不需要使用到官方直譯器與終端機,非常方便,安裝完成後只要在下方開啟「Watch Sass」,每次儲存 SASS/SCSS 檔時都會自動生成一般的 .css 樣式表與偵錯用的 .css.map,非常方便!而且可以自訂輸出路徑、格式、附檔名等,速度又快,相當推薦給您!
▲在延伸模組市集搜尋「Live Sass Compiler」並安裝它。

▲安裝完成後就可以在下方找到「Watch Sass」,點開後即可開啟即時編譯的功能,每次儲存都會編譯一次!(再點一下是關閉唷!)

▲「Watching...」代表功能是開啟的,首次儲存後就會生成兩個檔案:一般的 .css 樣式表與偵錯用的 .css.map。接下來是進階設定:

▲點開「檔案」→「喜好設定」→「設定」,找到圖中第三步的按鈕點入。

▲開啟「settings.json」,括弧內可以放入延伸模組的設定碼,這邊多加了壓縮格式的 CSS 輸出,這樣就可以同時輸出兩種格式的 CSS,非常便利!設定碼如下:

"liveSassCompile.settings.formats":[
    // 預設
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": null
    },
    // 新增壓縮的 CSS
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": null
    }
]

「liveSassCompile.settings.formats」設定屬性介紹:
format → 有「expanded」、「compact」、「compressed」和「nested」,預設是「expanded」。
extensionName → 副檔名,預設為「.css」,壓縮的 CSS 建議設定為「.min.css」。
savePath → 儲存路徑,樣式表的輸出路徑。預設為「null」,即儲存於 SASS/SCSS 同個目錄中。

※ 更詳細的介紹請參考:官方文檔

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇