用--primary-color代替#4a90e2可实现全局颜色统一管理：在:root声明，用var(--primary-color)引用，支持降级和动态切换；fallback不可嵌套函数；深色模式宜用class切换而非媒体查询重设；PostCSS需注意@import和calc兼容性。
怎么用--primary-color代替一堆#4a90e2
CSS变量本质是可复用的自定义属性，不是语法糖，而是运行时可变的“活值”。把颜色抽成--primary-color后，所有用到它的地方都只写var(--primary-color)，改一处就全局生效。
实操建议：
- 在
:root里统一声明，避免分散在各个选择器中（否则覆盖逻辑难追踪） - 别用
!important覆盖变量值——它不生效，CSS变量不参与层叠优先级计算 - 支持降级：写成
color: #4a90e2; color: var(--primary-color);，老浏览器会忽略第二行
为什么var(--color, #ccc)的fallback不能嵌套函数
因为CSS解析器在遇到var()时只做一次替换，且不递归求值。写var(--color, var(--fallback))会导致第二个var()被当作文本字面量，最终计算为字符串"var(--fallback)"，而不是颜色值。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 页面突然文字全黑/全白，控制台没报错，但颜色没渲染出来
- DevTools里看到 computed 值是
var(--fallback)原样字符串
正确做法：fallback只能是字面量值（如#ccc、red、transparent），或另一个已声明的变量（但必须确保它本身有确定值）
深色模式切换时--bg反复重设导致闪烁
直接在@media (prefers-color-scheme: dark)里覆盖:root变量，浏览器会触发重绘，如果变量用在大量元素上（比如每个button、card），可能肉眼可见闪烁。
使用场景：需要平滑过渡的管理后台或阅读类页面
性能关键点：
- 把颜色变量限制在根节点和少数容器上，别在每个组件内部重复声明
- 用
transition: background-color 0.2s配合变量，但注意：CSS变量本身不可动画，得靠监听变化后触发动画属性（如background-color） - 更稳的做法：用
class="theme-dark"切换，变量定义在:root.theme-dark下，避免媒体查询重排
PostCSS插件处理CSS变量时路径出错：Error: Cannot resolve variable --text
这是PostCSS插件（比如postcss-css-variables）在构建时静态解析失败，不是运行时报错。它无法跨文件解析@import引入的变量，也不理解动态JS注入的style.setProperty。
容易踩的坑：
- 变量定义在
vars.css里，主样式用@import "vars.css"——部分插件不支持@import内联，得手动合并文件 - 用了
calc(var(--size) * 2)，但插件不支持表达式运算，会报错或丢掉单位 - 变量名含连字符过多（如
--btn-primary-bg-hover）没问题，但拼错一个字母，插件不会提示，只会静默回退到fallback
建议：开发阶段用原生CSS变量+现代浏览器调试；构建时若必须兼容旧版，优先用postcss-custom-properties，它对@import和简单calc支持更稳。
模块化配色真正难的不是声明变量，而是约束团队别在组件里私自覆盖--primary-color——一旦出现.header { --primary-color: #ff6b6b; }，整个颜色体系就从树状变成网状了。
