在多人协作的前端项目里，同一种品牌蓝可能在按钮、链接、边框、阴影里被写了十几遍。一旦设计调整色值，开发者只能全局搜索逐个替换，既容易漏改又可能引发样式错乱。CSS原生自定义属性（常被称为CSS变量）提供了一条更合理的出路：把颜色定义在一次，在任意地方通过var()引用，后续维护只改源头即可。
什么是CSS自定义属性
CSS自定义属性是由开发者自己命名的属性，以两条短横线开头，例如--brand-color。它们可以挂在任意选择器上，最常见是挂在:root伪类里，使整份文档都能读取。自定义属性的值可以是颜色、长度、字符串等，甚至能参与calc()计算。
与传统Less或Sass变量在编译期就被替换不同，CSS变量保留到运行期，浏览器实时解析。这意味着你可以用JavaScript动态修改--brand-color，页面所有引用处立刻变化，而不需要重新打包。这种特性对主题切换、用户自定义外观非常有用。
:root {
--brand-color: #2f80ed;
--text-main: #1a1a1a;
--bg-page: #ffffff;
}
.btn {
background-color: var(--brand-color);
color: var(--text-main);
}
如何把重复颜色提取为变量
第一步是盘点项目里的色值。打开样式文件，把所有出现超过三次的颜色列出来，给每个颜色起语义化名字，例如--color-danger而不是--red-1，因为语义名在改版时更不容易失效。把这批变量集中写在:root中，作为设计令牌（design token）统一管理。
第二步是全局替换。可以借助编辑器的正则功能，把具体的#2f80ed替换成var(--brand-color)。替换后建议跑一遍视觉回归测试，确认没有把不该替换的渐变或图表颜色误改。对于第三方组件库，可用层叠覆盖其CSS变量（若它支持）或在外部包一层作用域重新赋值。
/* 改造前 */
.card { border: 1px solid #2f80ed; }
.link { color: #2f80ed; }
/* 改造后 */
.card { border: 1px solid var(--brand-color); }
.link { color: var(--brand-color); }
与预处理器变量的区别
很多团队已经用Sass的$color管理颜色，为什么还要CSS变量？核心差异在于生命周期。Sass变量在构建时变成静态值，无法在浏览器里被脚本改变；CSS变量随DOM存在，能响应运行时状态。二者并不冲突，常见做法是Sass变量生成CSS变量，兼顾编写便利与运行灵活。
另一个区别是作用域。Sass变量遵循代码块作用域，而CSS变量遵循DOM层级，子元素能继承并覆盖父级变量。利用这点，你可以给某个容器设--brand-color: #000，仅让内部板块临时变暗，不影响外部。这种按组件覆写的模式在嵌套主题中非常直观。
| 对比维度 | Sass变量 | CSS变量 |
|---|---|---|
| 生效时机 | 编译期 | 运行期 |
| JS可控 | 否 | 是 |
| 作用域 | 代码块 | DOM树 |
暗黑模式中的实战
暗黑模式是CSS变量最典型的应用。过去要写两套样式，现在只需在[data-theme="dark"]下重定义同一批变量，页面所有引用自动适应。这样逻辑集中在变量层，组件样式完全不用动，极大降低维护成本。
实现时记得给不支持CSS变量的老旧浏览器提供回退。可以在声明前先写固定色值，再用var()覆盖；或使用@supports检测。如下代码展示回退写法，保证IE等环境至少能显示基础颜色，不至于白底白字。
:root {
--bg-page: #ffffff;
}
body {
background-color: #ffffff; /* 回退 */
background-color: var(--bg-page);
}
[data-theme="dark"] {
--bg-page: #121212;
}
维护建议与常见误区
变量不是越多越好。如果把每一种微调灰都变成变量，文件反而更难读。建议只提取高频、有语义、可能变更的颜色，其余一次性色值直接写死。同时建立文档说明每个变量的用途与取值规范，避免后来者随意新增重复变量。
误区方面，有人把CSS变量当作常量，却忘了它能被任意子级覆盖，导致调试时找不到色值来源。推荐用命名空间约束，例如所有颜色以--color-开头，所有尺寸以--space-开头，并在代码评审中检查越权覆写。只要规则清晰，CSS变量就能真正成为可扩展的设计系统基石。
统一颜色管理的目标不是消灭重复，而是让重复变得可控。当设计语言变化时，你只需要改一处而不是搜全网。
CSS变量custom_properties颜色管理修改时间：2026-08-01 04:27:27