css全局色彩系统通过:root声明自定义属性（如--color-primary），支持嵌套引用和媒体查询内重定义，需提供var()回退值，区分大小写，不兼容ie，与sass变量本质不同。
如何在CSS中定义全局色彩系统变量
直接用 :root 块声明自定义属性，所有后代元素都能继承访问。这不是“引入”，而是原生 CSS 的变量注册机制，不需要额外构建工具或预处理器。
-
:root是最高层作用域，等价于html元素，但优先级更高、语义更清晰 - 变量名建议用
--color-primary这类双短横前缀，避免与未来 CSS 标准属性冲突 - 值必须是合法 CSS 值，比如
#3b82f6、hsl(210, 70%, 50%)或var(--color-bg)（支持嵌套引用） - 不支持在
@media外部用 CSS 变量做媒体查询条件，但可以在媒体查询内部重定义变量值
为什么不能在 class 里直接定义 :root 变量
:root 是伪类，不是选择器容器；它代表整个文档根，不能被“嵌套”或“条件化”。写成 .theme-dark :root { --color-text: #fff; } 是无效语法，浏览器会忽略整条规则。
- 真正生效的暗色主题切换，得靠切换
html元素上的 class，再配合:root.theme-dark { --color-text: #fff; } - 如果用 JS 动态设置，应调用
document.documentElement.style.setProperty('--color-text', '#fff')，而非操作某个 class 的样式块 - 不要试图在
@layer或@import中“覆盖”:root变量——它们不改变作用域链，只影响层叠顺序
使用 var() 时常见的解析失败错误
报错如 Invalid property value 或颜色突然变透明/黑色，大概率是 var() 回退值缺失或拼写错误。
- 务必为每个
var(--color-primary)提供回退值：例如color: var(--color-primary, #3b82f6); - 变量名大小写敏感：
--Color-Primary和--color-primary是两个不同变量 - 不能在
@keyframes内直接用var()控制关键帧数值（如transform: translateX(var(--dist))），需提前计算好或改用calc()组合 - PostCSS 插件（如 postcss-custom-properties）若启用，可能提前将
var()静态替换，导致无法运行时动态修改
和 Sass/Less 颜色变量的本质区别在哪
CSS 自定义属性是运行时机制，Sass 变量是编译时文本替换——这意味着前者能响应 JS 修改、媒体查询重载、甚至用户偏好（prefers-color-scheme）；后者只生成固定 CSS 字符串。
- Sass 的
$primary: #3b82f6在构建后就消失，无法被 DevTools 实时编辑或 JS 读取 - CSS 变量可通过
getComputedStyle(document.documentElement).getPropertyValue('--color-primary')获取，适合做主题调试工具 - 性能上无明显差异，但大量嵌套
var()（如var(--a, var(--b, var(--c)))）可能增加引擎解析负担，建议控制在两层以内 - 兼容性注意：IE 完全不支持，如需支持，得用 PostCSS 插件降级 + 手动维护 fallback 类名
--blue-500 这类具象名，改用 --color-brand-accent；否则换设计系统时，你得 grep 替换几十个文件，而不是只改 :root 里一行。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
