CSS: CSS 变量
最后更新：2026-10-13
CSS 变量（Custom Properties，自定义属性）让你可以在 CSS 中定义可复用的值，类似于编程语言中的变量。使用 CSS 变量可以大大减少重复代码，方便统一管理主题色、间距等设计令牌。
1. 定义变量
CSS 变量使用自定义属性名（以 -- 开头）来声明：
▶ 示例
▶ 试一试2. 使用变量
用 var() 函数引用变量：
▶ 示例
▶ 试一试3. 变量的作用域
CSS 变量的作用域由定义的位置决定：
全局变量——在 :root 中定义：
▶ 示例
▶ 试一试局部变量——在某个选择器中定义，只在该选择器及其子元素中生效：
▶ 示例
▶ 试一试4. 变量的继承
CSS 变量会像普通 CSS 属性一样继承：
▶ 示例
▶ 试一试5. var() 的备用值
var() 可以设置第二个参数作为备用值——当变量未定义时使用：
▶ 示例
▶ 试一试6. 通过 JavaScript 修改变量
✅ 主题切换实现： CSS 变量配合 JavaScript 是实现"暗黑模式"的最佳方案——在
<html> 上切换 data-theme 属性，CSS 中用变量引用不同颜色，一行 JS 代码就能切换整个站点的配色。
CSS 变量的一大优势是可以通过 JavaScript 动态修改：
▶ 示例
▶ 试一试7. 实现主题切换
CSS 变量是实现"暗黑模式"等主题切换的最佳方式：
▶ 示例
▶ 试一试然后通过 JavaScript 切换主题：
JAVASCRIPT
document.documentElement.setAttribute('data-theme', 'dark');
// 或
document.documentElement.setAttribute('data-theme', 'light');
8. CSS 变量的优势
- 减少重复代码：一个变量多处使用，修改只需改一处
- 运行时可修改：可以通过 JS 动态改变，实现主题切换
- 作用域控制：可以在特定容器中覆盖变量值
- 语义化：
--primary-color比#3498db更容易理解
9. 与预处理器的区别
CSS 变量（CSS 自定义属性）和 Sass/Less 中的变量不同：
| 特性 | CSS 变量 | Sass 变量 |
|---|---|---|
| 运行时修改 | ✅ 可以 | ❌ 编译后固定 |
| 作用域 | ✅ CSS 继承 | ❌ 编译后为固定值 |
| 浏览器 | 现代浏览器支持 | 无需浏览器支持（预编译） |
| JS 交互 | ✅ 可读写 | ❌ 无法访问 |
❓ 常见问题
Q CSS 变量和 Sass 变量有什么区别？
A CSS 变量是真正的 CSS 属性，可以在浏览器中动态修改，支持 JavaScript 读写。Sass 变量在编译后就变成了固定值，不能在运行时修改。CSS 变量可以做主题切换，Sass 变量不行。两者不冲突，可以配合使用。
Q CSS 变量的作用域规则是怎样的？
A CSS 变量遵循层叠规则。在
:root 中定义的变量全局可用，在某个元素上定义的变量只在该元素及其子元素中生效。利用这个特性可以做局部主题覆盖——给某个容器加不同的变量值，它内部所有引用该变量的地方自动变化。Q CSS 变量可以实现暗黑模式吗？
A 可以，这是 CSS 变量最经典的用途。在
:root 中定义亮色变量，在 [data-theme="dark"] 中覆盖为暗色值，然后一行 JavaScript document.documentElement.dataset.theme = "dark" 就能切换整个站点的配色。📖 小节
- CSS 变量是现代 CSS 开发中非常重要的工具
- 通过
--变量名定义，用var()使用，它让样式代码更整洁、更易维护 - 最大的价值在于：修改一个值，所有引用了该变量的地方自动更新
- 主题切换、响应式配色、统一设计语言——CSS 变量在大型项目中尤其有用
📝 作业
- 创建一个页面，使用 CSS 变量定义主题色、文字色、间距等至少 5 个变量，并在整个页面中使用它们。
- 基于上面的页面，实现"一键切换主题色"——在
:root中修改主色变量，观察页面所有相关元素的变化。 - 使用 CSS 变量实现一个简单的"白天/夜间"模式切换（通过 JS 切换 class 或 data-theme 属性）。
- 在某个容器（如一个卡片组件）中局部覆盖 CSS 变量的值，观察其子元素的样式变化。
