• 生成主題的過程通常涉及到定義一組可以靈活變更的樣式變量（如顏色、字體等），並使用這些變量來應用在不同的主題中。通過修改變量的值，可以實現主題的切換

• 步驟

1. 定義變量：需要定義與主題相關的 SASS 變量，如背景顏色、字體顏色等
2. 使用變量應用樣式：用這些變量來構建樣式，保證樣式能夠根據變量的值進行動態切換
3. 創建主題樣式：為不同的主題（如深色和淺色主題）設置不同的變量值
4. 使用混合器或函數：可以使用 SASS 的混合器來實現樣式的共享和組織
5. 實現主題切換：根據不同的條件（例如按鈕點擊或系統設置），動態地切換主題樣式

• 語法

1. 變量：用來存儲不同主題的顏色、字體等訊息
2. 巢狀：用來組織結構清晰的樣式程式碼
3. 條件語句（@if）：用來動態地設置不同的樣式
4. 混合器：用來定義和重複使用共享的樣式邏輯

實現深色與淺色主題切換

SASS
// 定義主題顏色變量
$light-bg: #ffffff;
$light-text: #000000;
$dark-bg: #333333;
$dark-text: #ffffff;

// 定義混合器，用於應用顏色主題
@mixin theme($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
}

// 基本樣式
body {
font-family: Arial, sans-serif;
@include theme($light-bg, $light-text); // 預設淺色主題
}

// 深色主題
.dark-mode {
@include theme($dark-bg, $dark-text);
}

// 按鈕樣式
button {
padding: 10px 15px;
border: none;
cursor: pointer;
@include theme($light-bg, $light-text);

// 切換深色主題時，按鈕樣式也要改變
.dark-mode & {
@include theme($dark-bg, $dark-text);
}
}

1. $light-bg, $light-text, $dark-bg,$dark-text：這些變量定義了淺色和深色主題的背景顏色和文字顏色。

2. @mixin theme($bg-color, $text-color)：這是 SASS 的混合器，用來簡化主題切換。它接收兩個參數：背景顏色和文字顏色，並將它們應用到相應的樣式中。
   body { ... }：
   在 body 標籤下，應用了 @include theme($light-bg, $light-text)，這表示網頁的初始樣式會使用淺色主題（背景為白色，文字為黑色）。

3. .dark-mode { ... }：
   當應用上 .dark-mode 類時，會將主題切換為深色，這裡使用了 @include theme($dark-bg, $dark-text)，將背景設為深灰色，文字設為白色。

4. button { ... }：
   定義了按鈕的樣式，初始樣式為淺色主題（背景白色，文字黑色）。
   當 .dark-mode 類生效時，按鈕樣式同樣會切換為深色主題，這是通過嵌套的 .dark-mode & 實現的

編譯後的 CSS：
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
color: #000000;
}

.dark-mode {
background-color: #333333;
color: #ffffff;
}

button {
padding: 10px 15px;
border: none;
cursor: pointer;
background-color: #ffffff;
color: #000000;
}

.dark-mode button {
background-color: #333333;
color: #ffffff;
}

• body { ... }：為 body 應用了初始的淺色主題，設置背景顏色為白色，文字顏色為黑色。
• .dark-mode { ... }：這個類代表啟用深色主題，設置背景顏色為深灰色，文字顏色為白色。
• button { ... }：為按鈕設置了默認的淺色樣式，背景為白色，文字為黑色。
• .dark-mode button { ... }：當深色主題啟用時，按鈕的樣式也會跟隨切換，背景變為深灰色，文字變為白色

SASS 語法與概念總結

• 變量：用來儲存主題的顏色值，便於在整個項目中進行重複使用和管理
• 混合器：可以將樣式邏輯封裝起來，避免樣式重複，並簡化主題樣式的應用
• 嵌套：用來組織更清晰的層次結構，讓深色主題中的按鈕樣式能夠覆蓋淺色主題中的按鈕樣式
• 動態主題切換：根據 HTML 元素（如 body 上的 .dark-mode 類）的變化，實現主題切換