VS Code 擴充推薦 - Live Sass Compiler

Sass 的出現，改善 CSS 語法的不足， Sass 可以更像寫程式一樣定義變數、函數，也可以使用 if-else, for 等程式常見的邏輯控制，甚至模組化都可以做到，最後還可以編譯輸出 CSS, 讓前端工程師的工作效率提升到一個全新檔次。

知名的前端框架 Bootstrap 即使用 Sass 開發的，足見 Sass 的實用性！

本文將如何在 VS Code 中使用 Live Sass Compiler 擴充將 Sass 編譯成 CSS 。

本文環境 #

• macOS
• VS Code
• Live Sass Compiler

Live Sass Compiler #

Live Sass Compiler 的使用方法相當簡單。

本文使用 Bootstrap 作為範例，先使用以下指令建立一個資料夾，並安裝 Bootstrap:

$ mkdir my_project
$ cd my_project
$ touch custom.scss
$ npm install bootstrap

成功的話， my_project 的資料夾結構應如下所示，可以看到 bootstrap 套件中有 scss/ 資料夾：

my_project
├── custom.scss
├── node_modules
│   ├── @popperjs
│   │   └── core
│   └── bootstrap
│       ├── LICENSE
│       ├── README.md
│       ├── dist
│       ├── js
│       ├── package.json
│       └── scss
├── package-lock.json
└── package.json

接著，我們打開 custom.scss 準備將檔案編譯成 CSS, 可以用以下語法 import Bootstrap 的主要 CSS styles, 並將 Bootstrap 預設的背景色改為色碼 #123456 (一定要先定義再 import ):

$body-bg: #123456;

@import "./node_modules/bootstrap/scss/bootstrap";

最後按下 VS Code 下方的 Watch Sass:

Live Sass Compiler 會將檔案編譯成 CSS, 所以可以看到左方檔案總管出現 2 個新檔案：

• custom.css
• custom.css.map

可以打開 custom.css 搜尋 #123456 檢查是否有更改成功。

接下來，只要修改 custom.scss 就會自動產生新的 custom.css 。

p.s. 更多關於如何客制 Boostrap 的方法請參考 Bootstrap 文件

Live Sass Compiler 的使用方式就是這麼樸實無華。

總結 #

Live Sass Compiler 讓寫 Sass 變得十分簡單，也不需要額外安裝 Sass 以及學習如何在終端機下指令執行 Sass 的編譯指令，這麼方便的擴充，一定要推薦給大家。

Enjoy!

References #

Live Sass Compiler

vscode