(3)SCSS的環境建立與實作測試(Live Sass Compiler)

Ivy Ho

Published in

IvyCodeFive

5 min readMay 15, 2020

今天要來介紹 Sass/SCSS 的環境建立，以及如何開始使用 Sass/SCSS 編譯。

六角學院課程中，使用以下兩種方法:

使用 Visual Studio Code 的套件 — Live Sass Compiler
下載 Prepros

本篇只介紹第一項，也是我目前正在使用的方法，就是使用 Visual Studio Code 的套件 — Live Sass Compiler，

會分為以下三個部分介紹:

下載步驟
實際測試步驟
改變編譯後 css 檔案放置路徑，設定步驟

Live Sass Compiler (Visual Studio Code 套件)

Visual Studio Code編即器 Live Sass Compiler 套件下載步驟

下載步驟(參考上圖) :

按下vs code 側邊欄的 “ 延伸模組 ”按鈕
搜尋套件名稱 “ Live Sass Compiler ”
點選此項套件
按下安裝

安裝後，視窗右下角 應會出現一個 “ Watch Sass ”的小小按鈕圖示，如上圖

下載成功後，就來實際操作看看吧 !

實際測試步驟 :

首先我們先建立一個 PROJECT 資料夾
在裡面新增一個 scss資料夾
在 scss 資料夾中新增一個 all.scss 檔案

4. 接著我們在 all.scss 檔案中使用 SCSS 寫法輸入一些測試內容

5. 按下右下角的 “ Watch Sass ” 按鈕，會變成 “ Watching…”的小圖示，代表套件有在運行。

6. 按下 “ Watch Sass ” 同時會發現資料夾中多出了兩個檔案，分別是 all.css 以及all.css.map 。

7. 打開 all.css 檔案，可以看到，我們剛剛使用 SCSS 寫法寫的 all.scss 內容已經成功編譯成 css 檔案囉 !

🙋‍♀️此時編譯好的 css 檔案是放在 scss 資料夾裡面的，如果我們希望他能夠放在獨立的 css 資料夾呢 ?

編譯後 css 檔案放置路徑設定步驟 :

在 vs code 編輯器左上角選單的 “ 檔案 “ 選項中，找到喜好設定，並點選“ 設定 ”。

2. 此時會跳出設定畫面，在畫面左上角選擇 “ 工作區 ”。

3. 點選右上角的 “ 開啟設定(JSON) “按鈕，打開 settings.json檔案。

4.複製以下程式碼到檔案中，以下提供兩種選項 :

選項1️⃣>>預設選項，將 CSS 存到獨立的資料夾內

{
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
    ]
}

選項2️⃣>>將 CSS 檔案存進獨立資料夾，並將檔案存成 壓縮檔

{
    "liveSassCompile.settings.formats":[
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/css"
        },
    ]
}

我們選擇選項2️⃣來測試