CSS变量需以--开头、大小写敏感，定义在:root可全局复用；支持深色模式通过@media或class重写；var()支持字面量回退值但不支持嵌套var()；IE不支持需fallback或构建时处理。
css 变量能定义颜色值，但必须用 -- 开头的自定义属性名
可以，:root 或任意选择器里用 --color-primary: #3498db 这种语法定义，再通过 var(--color-primary) 调用。浏览器原生支持，无需预处理器。注意：变量名必须以两个连字符开头，且大小写敏感——--Color-Primary 和 --color-primary 是不同变量。
怎么在多个组件里复用同一套颜色方案
把所有颜色变量集中定义在 :root 里，就能全局访问。如果项目有深色模式，可配合 @media (prefers-color-scheme: dark) 或 class 切换重写变量值。
:root {
--color-primary: #3498db;
--color-success: #2ecc71;
--color-warning: #f39c12;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--color-primary: #2980b9;
--color-success: #27ae60;
}
}</p><p>.button {
background-color: var(--color-primary);
color: white;
}</p><p>.alert-success {
border-left-color: var(--color-success);
}var() 函数不支持回退值嵌套，但可以设默认颜色
var(--color-bg, #fff) 中的 #fff 是回退值，仅当 --color-bg 未定义或无效时生效。它不能是另一个 var()，比如 var(--color-bg, var(--fallback)) 会报错。回退值只接受字面量（十六进制、rgb、关键词等），不解析函数。
- ✅ 正确：
background: var(--bg-color, #ffffff) - ❌ 错误：
background: var(--bg-color, var(--default-bg)) - ⚠️ 注意：回退值不触发级联，也不会继承父级变量
IE 不支持 css 变量，需要 fallback 或构建时处理
IE11 及更早版本完全不识别 var() 和 -- 语法。如果必须兼容 IE，得在声明时手动加一层静态值：
立即学习“前端免费学习笔记（深入）”；
.card {
background-color: #f8f9fa; /* fallback for IE */
background-color: var(--surface-light, #f8f9fa);
}或者用 PostCSS 插件（如 postcss-css-variables）在构建阶段展开变量。但要注意：动态修改（比如 JS 改 style.setProperty）在 IE 下无效，只能靠 class 切换模拟。
变量本身不“编译”，它的灵活性正来自运行时计算——这也意味着，别指望它像 Sass 变量那样在 CSS 压缩时被合并成常量；每个 var() 都保留为运行时查找。
