CSS 變數
CSS 變數
CSS 變數（也稱為自定義屬性）使得在樣式表中使用變量來存儲值變得可能。這些變數可以在整個樣式表中重複使用，並且可以根據需要靈活地更改，使得樣式更加一致、可維護和可重複使用。
1. 定義 CSS 變數
CSS 變數的語法很簡單。變數名稱通常以兩個連字號 (--) 開頭，並且可以在任何選擇器的作用域中定義。
語法：
1
2
3
:root {
--變數名稱: 變數值;
}
:root是一個全局選擇器，通常用於定義全局變數。--變數名稱是自定義變數的名稱。變數值是你希望賦予變數的 CSS 值。
範例
定義一些全局變數以用於顏色和間距：
1
2
3
4
5
6
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size-large: 20px;
--padding-small: 10px;
}
在這個範例中，我們定義了幾個常用的變數（如主色、次色、字體大小和內距）。這些變數現在可以在整個樣式表中使用。
2. 使用 CSS 變數
要使用 CSS 變數，需要使用 var() 函數來調用變數。
語法：
1
property: var(--變數名稱);
範例
使用前面定義的變數來設置按鈕的樣式：
1
2
3
4
5
6
7
8
9
.button {
background-color: var(--primary-color);
color: white;
font-size: var(--font-size-large);
padding: var(--padding-small);
border: none;
border-radius: 5px;
cursor: pointer;
}
在這個範例中，.button 元素使用了 --primary-color 作為背景顏色，--font-size-large 作為字體大小，--padding-small 作為內距。
3. 局部變數
CSS 變數也可以在更具體的作用域內定義和使用，例如在特定的選擇器中。這樣，變數的作用範圍就限制在該選擇器及其子元素內。
範例
在一個特定的容器中定義局部變數：
1
2
3
4
5
6
7
8
9
.container {
--container-padding: 20px;
padding: var(--container-padding);
}
.container .item {
padding: var(--container-padding); /* 繼承自父容器的變數值 */
margin-bottom: var(--container-padding);
}
在這個例子中，--container-padding 變數的作用域只限於 .container 選擇器及其子元素。
4. 變數的回退值
當使用 CSS 變數時，如果變數未定義或無效，可以指定一個回退值。這樣，在變數無法正常使用的情況下，會使用回退值作為替代。
語法：
1
property: var(--變數名稱, 回退值);
範例
在變數未定義時使用回退值：
1
2
3
4
.card {
background-color: var(--card-bg-color, #f0f0f0); /* 如果 --card-bg-color 未定義，則使用 #f0f0f0 */
padding: var(--padding-large, 15px); /* 使用變數值或回退值 */
}
5. CSS 變數的優勢
- 增強可維護性：將常用的樣式屬性（如顏色、字體大小、間距等）定義為變數，當需要修改時，只需更改變數值即可。
- 提升一致性：通過使用變數，可以確保在不同的元素中使用相同的樣式值。
- 提高靈活性：變數可以在不同的作用域中定義，並且可以根據不同的情況動態改變。
6. CSS 變數的應用實例
6.1 主題切換
CSS 變數可以用於實現網頁的主題切換功能，例如從淺色主題切換到深色主題：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
/* 深色主題 */
.dark-theme {
--bg-color: #333333;
--text-color: #ffffff;
}
當應用 .dark-theme 類時，變數的值會被替換為深色主題的顏色：
1
2
3
<body class="dark-theme">
<p>這是一個深色主題。</p>
</body>
6.2 界面設計中的動態變化
可以在不同的屏幕尺寸下更改變數的值，從而實現響應式設計：
1
2
3
4
5
6
7
8
9
10
11
12
13
:root {
--padding-size: 10px;
}
@media (min-width: 768px) {
:root {
--padding-size: 20px;
}
}
.container {
padding: var(--padding-size);
}
7. 小結
CSS 變數是一種強大的工具，提供了更靈活的方式來管理和使用樣式。在現代網頁設計中，使用 CSS 變數可以顯著提高代碼的可讀性、可維護性和重用性，尤其是在處理複雜的設計或實現主題切換時。