应按语义分层定义:root颜色变量，如--color-primary、--color-text-primary；预处理器负责静态生成，CSS变量专用于运行时动态变更；需规避IE兼容性问题及动画、伪元素等失效场景。
怎么用:root定义全局颜色变量才不翻车
直接把颜色全塞进:root看似省事，但实际项目里容易导致命名混乱、覆盖难控、主题切换卡壳。关键不是“能不能放”，而是“按什么逻辑分组放”。
建议按语义分层，而不是按色值分层：
-
--color-primary：主品牌色（不是--color-blue-500） -
--color-text-primary：正文文字，和--color-primary可能同色但语义独立 -
--color-border-divider：分隔线，别写成--color-gray-200——灰度值会随主题变
这样改主题时只需重置:root里几组变量，不用满项目搜#007bff。
CSS变量在Sass/Less项目里要不要混用
可以混，但必须明确分工：预处理器管“生成”，CSS变量管“运行时变更”。常见错误是用$primary-color生成一堆.btn--primary类，再用--color-primary去覆盖——结果样式优先级打架，!important满天飞。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- Sass里只用变量做计算（比如
lighten($primary, 10%)），输出静态类名 - 所有需要JS动态改的颜色（如暗黑模式切换、用户自定义主题），只走
document.documentElement.style.setProperty() - 避免
@apply --color-primary这类伪指令——原生CSS不支持，工具链转译后行为不可控
浏览器兼容性坑在哪？哪些地方不能用CSS变量
IE全系不支持，这是硬伤；但更隐蔽的坑在CSS动画和伪元素里。
这些场景会失效或降级：
- 作为
animation关键帧里的颜色值（Chrome 84+才稳定支持） - 在
::before/::after的content里用attr()读取变量（根本不支持） - 当变量值含单位（如
--size: 16px）又被用在calc(1em + var(--size))时，Safari旧版会报错
查兼容性最准的方式是看var(--x)是否被浏览器解析为有效声明——打开DevTools，删掉var()看样式是否突变。
如何让设计系统里的颜色变量真正可维护
靠人记不住，得靠机制。最有效的做法是把变量定义和视觉规范绑定在一起。
具体操作：
- 所有
:root变量必须带注释，格式统一：/* @token color-primary — 主按钮点击态，对应Figma样式库#123 */ - 用PostCSS插件（如
postcss-custom-properties）做构建时校验，发现未定义变量直接报错 - 禁止在组件内部
style标签或inline style里写死颜色值——CI阶段用正则扫描#(?:[0-9a-fA-F]{3}){1,2}和rgb\(|hsl\(报警
变量本身没有魔法，能约束住人写代码的手，才是大型项目里颜色不散架的关键。
