CSS变量在IE等旧浏览器中不支持，需用postcss-custom-properties插件在构建时静态替换为实际值；要求变量为静态常量、定义明确，动态JS设置的变量无法降级，建议配合no-cssvars类或@supports做双重兜底。
CSS 变量（Custom Properties）在 IE 和较老版本的 Safari、Android Browser 等环境中完全不支持。直接使用会导致样式失效或降级异常。解决办法不是放弃变量，而是用 PostCSS 插件在构建阶段把 CSS 变量“翻译”成静态值，让旧浏览器也能读取。
用 postcss-custom-properties 实现变量降级
这是最主流的方案，它会将 :root 或选择器内定义的 CSS 变量，按作用域替换为对应的实际值（前提是变量有确定的、可静态解析的初始值）。
- 支持嵌套作用域和 fallback 值（如
var(--color, #000)），插件会优先取 fallback - 要求变量定义必须是静态常量（不能是 calc() 动态表达式、其他变量拼接等），否则无法降级
- 需配合
postcss-preset-env或单独引入，配置示例：
'postcss-custom-properties': { preserve: false }
}
注意变量定义位置和作用域
PostCSS 只能处理编译时可确定的变量值。如果变量在 JS 中动态设置（如 el.style.setProperty('--color', 'red')），降级插件无法捕获，这部分逻辑仍需 JS 兜底或避免在旧浏览器中依赖。
-
:root下定义的全局变量最稳妥，推荐集中管理 - 组件级变量（如
.btn { --bg: blue; }）会被转换为该选择器下所有用到var(--bg)的声明，但不会跨选择器传播 - 避免在媒体查询里定义变量再在外部引用——PostCSS 通常不回溯解析
搭配 fallback 类名或 class 切换增强兼容性
仅靠变量降级还不够保险。对关键样式（比如主题色、尺寸断点），建议提供 class 级 fallback：
立即学习“前端免费学习笔记（深入）”；
- 给
加一个no-cssvars类（通过 JS 检测支持后移除） - 写两套规则：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; } - 或用
@supports not (background: var(--x))包裹降级样式（注意：IE 不支持 @supports，所以仍需 class 方案兜底）
检查构建输出，验证降级是否生效
运行构建后，打开生成的 CSS 文件，搜索 var(-- —— 如果还有未被替换的变量，说明存在以下可能：
- 变量未在当前作用域定义（比如用了
var(--color)但没在 :root 或父级声明） - 变量值包含 calc()、其他变量、函数等无法静态求值的内容
- PostCSS 配置未正确加载，或插件顺序错误（需确保 custom-properties 在 autoprefixer 之前运行）
