直接修改 :root 中的 CSS 变量值即可批量更新主色调，所有 var(--primary) 引用自动同步；必须定义在 :root 全局作用域，避免组件内局部定义；不可与 Sass 变量混用；兼容 IE 需构建时替换或 JS 降级；命名需预留扩展性。
怎么用 CSS 变量批量改主色调
直接改 :root 里的变量值，所有用到的地方自动同步更新。比全局搜替换 #4a90e2 安全得多，也比写多套 class 更轻量。
常见错误是把变量写在某个组件内部（比如 .header { --primary: red; }），结果只局部生效，主色调还是没变。必须确保变量定义在全局作用域，且优先级不被覆盖。
- 在
:root中定义基础色：:root { --primary: #4a90e2; --secondary: #f5f5f5; --text: #333; } - 所有组件用
var(--primary)替代硬编码颜色：button { background-color: var(--primary); color: var(--text); } - 如果用了 CSS-in-JS 或 Shadow DOM，注意变量不会自动穿透，得手动传入或在对应作用域重定义
CSS 变量和预处理器变量（如 Sass）混用会怎样
两者完全不兼容。Sass 的 $primary 在编译时就替换成具体值，而 var(--primary) 是运行时计算的。混用会导致“改了 Sass 变量但页面没反应”，或者“CSS 变量失效后 fallback 不起作用”。
典型场景：你用 Sass 写了个主题 mixin，又想用 JS 切换 --primary —— 这时 Sass 编译出的 CSS 里已经没有变量名了，JS 改不了。
立即学习“前端免费学习笔记（深入）”；
- 要支持运行时换色，整个配色体系必须统一用 CSS 变量，Sass 只负责结构、布局类逻辑
- 如果已有大量 Sass 颜色变量，可以用自动化脚本把
$primary转成--primary，但别保留双份 -
var(--primary, #4a90e2)的 fallback 值不能是另一个变量（如var(--fallback)），浏览器不支持嵌套
动态切换主题时，document.documentElement.style.setProperty 怎么用才不卡
频繁调用 setProperty 改多个变量会触发多次重排重绘，尤其在低端设备上明显卡顿。不是不能用，而是得控制节奏。
真实使用场景：用户点“深色模式”按钮，你要一口气切 10+ 个颜色变量，但不想让用户看到中间态（比如按钮先蓝后灰）。
- 把所有变量更新包进一次
style.setProperty调用，别循环调用：const root = document.documentElement; root.style.setProperty('--primary', '#2c3e50'); root.style.setProperty('--bg', '#1a1a1a'); // …… 一次性设完，而不是用 for 循环 - 更稳妥的做法是提前写好两套
:root[data-theme="dark"]和:root[data-theme="light"]，JS 只改data-theme属性，让 CSS 自己接管变量赋值 - 不要在
scroll或input事件里实时改变量，除非加节流，否则性能崩得很快
IE 不支持 CSS 变量，但项目还得兼容，怎么办
IE11 及以下直接忽略 var()，连 fallback 都不认。不是“降级显示”，而是彻底失效，所有用到的地方变成 transparent 或初始值，页面可能大面积失色。
这不是加个 @supports 就能解决的事——因为 IE 连 @supports 都不支持。
- 最省事的方案：用 PostCSS 插件（如
postcss-css-variables）在构建时把var(--primary)替换成实际值，生成一份兼容 IE 的 CSS 备用 - 如果必须运行时换色，就得用 JS 检测
CSS.supports('color', 'var(--x)')，不支持时走 class 切换老方案（如.theme-dark .btn） - 别指望
filter: invert()或background-image: linear-gradient()模拟主题色，维护成本高，且无法精确还原色值
真正麻烦的不是怎么写，而是变量命名要留余地——比如 --primary 后来发现要分 --primary-light 和 --primary-dark，早期没预留层级，后面就得全局改引用，连注释都容易漏掉。
