2.1 宣告CSS變數
CSS變數，也稱為自定義屬性（Custom Properties），允許定義在不同CSS代碼部分中可重複使用的值。它們大大簡化了樣式的管理並提高了它們的靈活性。
CSS變數使用雙連字符（--）宣告，可以在任何選擇器中設置。然而，為了保證變數在整個文檔中的可用性，它們通常在根選擇器:root中定義。
語法：
選擇器 {
--變數名: 值;
}
範例：
在這個範例中宣告了四個變數：--main-bg-color、--main-text-color、--primary-color和--font-size。
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
使用CSS變數
要使用變數的值，應用var()函數，該函數接受變數名作為參數。
語法：
選擇器 {
屬性: var(--變數名);
}
範例：
在這個例子中，變數的值用於設置背景顏色、文字顏色、字體大小和鏈接顏色。
CSS
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 CSS變數的使用例子
範例 1: 變數的基本使用
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
HTML
<body>
<p>這是一段帶有鏈接的段落至 <a href="#">Example.com</a>.</p>
</body>
結果：
- 頁面的背景將是淺灰色
- 文本將是深灰色
- 字體大小為16像素
- 鏈接為藍色
範例 2: 單獨組件中變數的重定義
CSS變數可以為單獨的元素或組件重定義，提供樣式的靈活性：
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* 重定義變量 */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
HTML
<div class="header">
<p>這是頁眉。</p>
</div>
<div class="footer">
<p>這是頁腳。</p>
</div>
結果：
- 頁眉的背景將是藍色，文字為淺灰色
- 頁腳的背景將是紅色（重定義變量），文字為淺灰色
範例 3: 與其他值結合使用變數
CSS變數可以與其他CSS值和函數結合使用：
CSS
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
HTML
<div class="container">
<p>這是一個帶有填充和邊距的容器。</p>
</div>
結果：
- 容器將具有由變數設定的填充和邊距
2.3 在JavaScript中使用CSS變數
在JavaScript中使用CSS變數的範例
可以使用JavaScript動態更改CSS變數，以實現實時樣式適應：
CSS
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
HTML
<button id="toggle-theme">切換主題</button>
<p>這是一段文字。</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
解釋：
點擊按鈕時，變數--bg-color和--text-color的值會改變，這會導致頁面背景和文本顏色的變化。
GO TO FULL VERSION