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);
}

会被编译为：

黑点工具

在线工具导航网站，免费使用无需注册，快速使用无门槛。

18

查看详情

: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’);

这个插件功能更专注，适合轻量项目。

注意事项与最佳实践

使用 PostCSS 处理 CSS 变量时注意以下几点：

• 动态修改的变量（JavaScript 修改 --size 控制布局）在编译后会丢失灵活性，需评估是否影响功能
• 建议在设计系统或主题切换场景中谨慎使用编译，避免破坏运行时逻辑
• 开发环境可保留变量，生产构建时再进行替换
• 结合 .browserslistrc 配置目标浏览器，让 preset-env 自动判断是否需要转换

基本上就这些。PostCSS 不直接解析变量，但通过插件生态，可以很好地管理和转换 CSS 变量，实现兼容性和现代特性的平衡。

以上就是如何用