在 CSS 中，變量（Custom Properties） 允許你定義可重用的值，方便在整個樣式表中使用和修改。CSS 變量的基本語法如下：
1. 定義 CSS 變量
CSS 變量通常在 :root 偽類中定義，以便它們可用于整個文檔：
:root {--main-color: #3498db;--secondary-color: #2ecc71;--font-size: 16px;
}
- 變量名稱以
--開頭，比如--main-color :root選擇器相當于html，使變量全局可用
2. 使用 CSS 變量
在 CSS 規則中使用 var() 函數引用變量：
語法：var(自定義屬性, 回退值)
body {color: var(--main-color);font-size: var(--font-size);
}button {background-color: var(--secondary-color);border: 2px solid var(--main-color);
}
回退值用法：
/* 回退值 *//* 在 component 的樣式中：*/
.component .header {/* header-color 沒有被設置，將使用回退值 blue */color: var(--header-color, blue);
}.component .text {color: var(--text-color, black);
}/* In the larger application's style: */
.component {--text-color: #080;
}使用自定義屬性作為回退值
:root {--backup-bg-color: teal;
}body {/* main-bg-color 沒有被設置，將使用回退值 backup-bg-color。如果 backup-bg-color 沒有被設置，將使用回退值 white。 */color: var(--main-bg-color, var(--backup-bg-color, white));
}3. 變量的作用域
- 變量可以定義在
:root作用域，全局可用 - 也可以在特定的元素中定義，僅該元素及其子元素可以使用
.card {--card-bg: #f5f5f5;background-color: var(--card-bg);
}
4. 提供默認值
如果變量未定義，可以使用 var() 提供默認值：
p {color: var(--text-color, black); /* 如果 --text-color 未定義，則使用 black */
}
5. 在 JavaScript 中操作 CSS 變量
CSS 變量可以通過 JavaScript 動態修改：
document.documentElement.style.setProperty('--main-color', 'red');
6. CSS 變量 vs 預處理器變量
| 特性 | CSS 變量 (var()) | 預處理器變量 (SASS/LESS) |
|---|---|---|
| 作用域 | 運行時可變 | 編譯時確定 |
| JavaScript 操作 | 可以修改 | 不能修改 |
| 計算 | 可與 calc() 結合使用 | 預計算 |
7. 使用場景：
- 動態主題切換
動態主題切換
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>:root {--bg-color: white;--text-color: black;}.dark-theme {--bg-color: black;--text-color: white;}body {background-color: var(--bg-color);color: var(--text-color);}</style>
</head>
<body>
<button onclick="handleClick(event)">深色主題</button>
<script>let isDeep = false;function handleClick(e) {document.body.classList.toggle('dark-theme');isDeep = !isDeep;e.target.innerHTML = isDeep ? '淺色主題' : '深色主題';}
</script>
</body>
</html>
- 動態hover
動態hover
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;background-color: #ccc;}div:hover {background-color: var(--hover-bg);}</style>
</head>
<body><div id="box" style="--hover-bg: none">hello</div><select id="select"><option value="red">紅</option><option value="green">綠</option><option value="blue">藍</option></select><script>const select = document.getElementById('select');const box = document.getElementById('box');box.style.setProperty('--hover-bg', select.value);const handleChange = (e) => {const value = e.target.value;box.style.setProperty('--hover-bg', value);}select.addEventListener('change', handleChange);</script>
</body>
</html>
CSS 變量非常適合 主題切換、響應式設計、動態樣式調整 等場景。 🚀
)
)
