CSS 自定义属性
css · intermediate · 20-25 min · Step 1/5CSS 自定义属性（CSS Variables）
:root {
--primary: #3b82f6;
--radius: 8px;
--shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.card {
background: var(--primary);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
优势
| 对比 | Sass 变量 | CSS 变量 |
|---|---|---|
| 运行时修改 | 不可以 | 可以 |
| 作用域 | 全局 | 级联继承 |
| JavaScript 访问 | 不可以 | 可以 |
| 媒体查询内修改 | 不可以 | 可以 |
CSS 变量可以在 JavaScript 中通过 element.style.setProperty('--primary', '#f00') 动态修改，这是实现主题切换的关键。