前言

今天我要介紹一個特別的主題，那就是將我的 CSS 程式碼轉換成 SCSS 程式碼。我會介紹 SCSS 是因為我發現 CSS 程式碼變得太過冗長了，每次要找程式碼都要花很多時間在閱讀程式上，很難維護我的程式碼。

為了解決這個問題，我決定介紹一個很有用的 VSCode 擴充套件叫做 Live Sass Compiler，我之前沒有想使用這個工具是因為我沒有想到 CSS 程式碼會變得這麼長。

SCSS

首先，讓我簡單介紹一下什麼是 SCSS。SCSS 是 CSS 的預處理器，它可以讓 CSS 擁有類似於 JavaScript 的特性，像是使用變數和函數等等。這種特性不僅可以加速網頁開發速度，還可以使我們更好維護程式。

在 VSCode 中，有一個叫做 Live Sass Compiler 的擴充套件，如下圖所示：

第一步當然就是先下載並安裝 Live Sass Compiler，然後在專案資料夾建立附檔名叫做 SCSS 的檔案，如下圖所示：

然後，可以在檔案中撰寫 CSS 程式碼，就像這樣：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

看起來和 CSS 很像吧，不過之後就會介紹它們的不同之處。
最後，點擊下方的 "Sass Watch"，編譯器就會自動生產對應的 CSS 檔案，這樣就可以將生成的 CSS 檔案連結到 HTML 檔案中了。

唯一要注意的一點，就是每次在撰寫專案時，都要確定按下 "Sass Watch" 它才會進行編譯。

SCSS 基本功能

現在，我來介紹一些 SCSS 的基本功能。

1. 巢狀語法

巢狀語法是 SCSS 中很強大的功能，它可以幫助我節省很多時間，也可以讓我輕鬆找到我想要修改的程式碼位置。

比如說我想要設定 <header> 元素和裡面 <button> 元素的樣式，一般 CSS 會這樣寫：

header {
    width: 100%;
    padding: 1rem 0;
    position: relative;
    text-align: center;
    transition: all 0.5s ease-in-out;
}
header button {
    position: absolute;
    top: 30%;
    left: 10%;
    font-size: large;
}

但是在 SCSS 中，我可以使用更簡潔的方式撰寫：

header {
    width: 100%;
    padding: 1rem 0;
    position: relative;
    text-align: center;
    transition: all 0.5s ease-in-out;

    #openSidebarButton {
      position: absolute;
      top: 30%;
      left: 10%;
      font-size: large;
    }
}

這種功能在設定巢狀選單樣式時，會讓人特別有感，可以節省很多閱讀程式的時間。

2. 變數

在 SCSS 中，我可以像在 JavaScript 中一樣設定變數。當我的程式碼需要使用到大量重複的樣式時，使用變數就可以很容易修改，不用花時間一行一行去修正程式。

比如說，我想設定一個背景顏色的變數。我在變數名稱前加上 "$" 符號，然後進行樣式設定。設定完畢後，我將變數放到 header 的樣式設定中：

$backgroundColor: green;

header {
    background-color: $backgroundColor;
}

這樣當我想要更改背景顏色時，我只需要修改變數 $backgroundColor 的值就可以了。

3. self ampersand

SCSS 中的 "&" 符號，在設定選擇器狀態的樣式時非常有用。
比如，我想要設定 <button> 的 "hover" 效果，一般在 CSS 內會寫成

button {
    color: red;
}

button:hover {
    color: white;
}

但是在 SCSS，可以使用 "&" 符號，這樣編譯器就會知道我是要設定 <button> 的 "hover" 效果。

button {
    color: red;
    
    &:hover {
        color: white;
    }
}

4. import

SCSS 允許將外部的 SCSS 檔案導入到當前的 SCSS 檔案中，這樣當我有很多 HTML 檔案都要使用相同樣式設定時，就不用重複撰寫相同的程式碼了。

比如說，我要在我 HTML 檔案裡面為 <button> 設置相同的樣式，我可以另外建立一個 SCSS 檔案，假設叫做 "button.scss"，然後在裡面設定樣式。

之後，回到我的 "style.scss" 中，使用 @import "./button" 就可以導入 "button.scss" 的樣式設定了。

5. mixin

mixin 類似於 JavaScript 中的函數，可以重複使用部分樣式。例如，我可以建立一個通用的按鈕樣式，然後在程式中使用它。

@mixin button {
    font-size: 2rem;
    color: #ccc;
}

假設我要在 <header> 中使用此設定，我只要直接寫在 header 的樣式設定中就可以了。

header {
    @include button;
}

改寫心得

和我開頭提出的原因一樣，由於我的程式碼太過冗長，所以我使用 ChatGPT 幫助我將程式碼轉換成 SCSS 程式碼，然後再針對需要修改的地方進行更改。

改寫的程式碼可以上我的 Github 上看一下，我主要將程式碼分成通用樣式設定和主題樣式設定。我將通用樣式設定設為 mixin，以便在主題樣式設定完成後使用通用樣式設定。

在這次深刻體會到 ChatGPT 的便利之處，不然可能要花上一段時間才可以完成改寫。

連結

github: ThemeTasker