CSS 变量
--变量名 定义、var() 使用、:root 全局变量、JS 操作
CSS 变量
CSS 变量（自定义属性） 让样式值可复用、可动态修改——比预处理器变量更强大。
学完本章你将： 掌握 --变量名/var()、:root 全局变量、JS 操作。
定义与使用
css
/* 定义——通常在 :root（全局） */
:root {
--primary: #4CAF50;
--spacing: 16px;
--radius: 8px;
}
/* 使用——var() */
.btn {
background: var(--primary);
padding: var(--spacing);
border-radius: var(--radius);
}默认值与回退
css
/* 变量不存在时用默认值 */
.box {
color: var(--text-color, #333); /* --text-color 不存在 → #333 */
padding: var(--gap, 10px 20px); /* 默认值也可以是复杂值 */
}局部变量
css
.card {
--card-bg: #fff; /* 只在 .card 内有效 */
background: var(--card-bg);
}
.card.dark {
--card-bg: #333; /* 覆盖 */
}JS 操作变量
javascript
// 修改变量
document.documentElement.style.setProperty('--primary', '#FF6B6B');
// 读取变量
getComputedStyle(document.documentElement).getPropertyValue('--primary');实用场景
css
:root {
--primary: #4CAF50;
--text: #333;
--bg: #fff;
}
/* 暗色模式 */
[data-theme="dark"] {
--primary: #81C784;
--text: #eee;
--bg: #222;
}
body { color: var(--text); background: var(--bg); }