PostCSS通过插件如postcss-preset-env或postcss-custom-properties将CSS变量转换为静态值以兼容旧浏览器，支持变量展开与保留，需注意动态变量的灵活性损失及生产环境的合理配置。
PostCSS 本身不直接处理浏览器原生的 CSS 自定义属性（也就是 CSS 变量，如 --primary-color），但它可以通过插件来转换、兼容或操作这些变量。尤其在需要支持旧版浏览器时，使用 PostCSS 配合特定插件可以将 CSS 变量编译为静态值。
理解 CSS 变量与 PostCSS 的关系
CSS 变量是运行在浏览器中的特性，写法如下：
:root {--main-color: #333;
}
.element {
color: var(--main-color);
}
这种语法在现代浏览器中可以直接使用，但如果你需要支持不识别 CSS 变量的旧浏览器（如 IE），就需要用 PostCSS 将它们“展开”成固定值。这正是 PostCSS 插件能做的事。
使用 postcss-preset-env 处理 CSS 变量
postcss-preset-env 是最常用的插件之一，它能将现代 CSS 特性逐步降级到兼容旧浏览器的形式，其中包括对 CSS 变量的支持。
立即学习“前端免费学习笔记（深入）”；
安装：
npm install --save-dev postcss-preset-env配置 postcss.config.js：
module.exports = {plugins: [
require('postcss-preset-env')({
features: {
'custom-properties': true // 启用 CSS 变量处理
}
})
]
};
启用后，PostCSS 会：
- 读取
:root中定义的变量 - 将
var(--color)替换为对应的常量值 - 保留原始变量用于现代浏览器（可选）
例如：
:root {
--text-color: red;
}
p {
color: var(--text-color);
}
会被编译为：
:root {--text-color: red;
}
p {
color: red; /* 回退 */
color: var(--text-color); /* 原始变量仍保留 */
}
你可以通过 preserve: false 禁止保留变量，只输出静态值。
使用 postcss-custom-properties 单独处理变量
如果你只需要处理变量，而不是整个 preset，可以单独使用 postcss-custom-properties 插件。
安装：
npm install --save-dev postcss-custom-properties配置：
const postcssCustomProperties = require('postcss-custom-properties');module.exports = {
plugins: [
postcssCustomProperties({
preserve: true
})
]
};
这个插件功能更专注，适合轻量项目。
注意事项与最佳实践
使用 PostCSS 处理 CSS 变量时注意以下几点：
- 动态修改的变量（JavaScript 修改
--size控制布局）在编译后会丢失灵活性，需评估是否影响功能 - 建议在设计系统或主题切换场景中谨慎使用编译，避免破坏运行时逻辑
- 开发环境可保留变量，生产构建时再进行替换
- 结合
.browserslistrc配置目标浏览器，让 preset-env 自动判断是否需要转换
基本上就这些。PostCSS 不直接解析变量，但通过插件生态，可以很好地管理和转换 CSS 变量，实现兼容性和现代特性的平衡。
