不能。postcss-preset-env 不支持降级 color-mix()，因其为运行时函数，无法静态推导颜色值；仅 postcss-color-mix 和 postcss-relative-color 可实质性降级，但均要求输入为具体颜色字面量，不支持变量或 currentColor。
postcss-preset-env 能不能降级 color-mix()？
不能。它对 color-mix() 没有转换能力，无论 stage 设多高、targets 写得多全，输出 CSS 里仍会原样保留 color-mix(in srgb, red 50%, blue 50%)。浏览器不支持时直接跳过整条声明，不是报错，是静默失效。
原因很直接：color-mix() 是运行时计算函数，不是语法糖或结构转换问题——PostCSS 在构建期看不到最终颜色值，也没法猜出你“想混合成什么”。它只能处理可静态推导的语法（比如嵌套、@layer），没法模拟色彩空间插值逻辑。
哪些 PostCSS 插件能真正处理 color-mix()？
目前只有两个插件能做实质性降级，但都要求你提供「基准色的具体值」：
-
postcss-color-mix：把color-mix(in srgb, #2563eb 70%, #fff 30%)直接算成#81aef5，支持in srgb和in oklch，但不支持变量引用 -
postcss-relative-color：能解析oklch(from var(--primary) l c h)这类语法，但前提是--primary在同一文件中已定义为具体值（如--primary: #2563eb），否则报Error: Cannot resolve variable --primary
⚠️ 两者都拒绝处理含 var(--x) 或 currentColor 的输入——它们不是运行时环境，无法读取 DOM 或 CSS 计算结果。
立即学习“前端免费学习笔记（深入）”；
为什么 postcss-preset-env 启用 color-mix 特性还是没用？
因为它的 features: { 'color-mix': true } 实际上只是开启对 @supports (color-mix(...)) 这类检测语法的支持，不是启用降级。它不会碰你的 color-mix() 函数调用本身。
常见误操作包括：
- 以为开了
stage: 4就自动兼容——其实 stage 4 表示标准已定稿，更不需要转换 - 在
postcss.config.js里写了features: { 'color-mix': true }，但没装对应插件（该选项实际依赖外部插件，preset-env 自身不实现） - 和
autoprefixer配置顺序反了：必须 preset-env 在前、autoprefixer 在后，否则色彩空间关键字（如in srgb）可能被 autoprefixer 错误删掉
最稳妥的实操路径是什么？
别指望构建工具“全自动”兜底。真实可用的流程是：
- 所有
color-mix()调用必须用具体颜色字面量，例如#2563eb或hsl(210 70% 60%)，禁用var(--primary) - 用
postcss-color-mix（推荐）或postcss-relative-color做构建时展开，确认输出 CSS 中已无color-mix字样 - 手动加
@supports检测 + fallback：先写color: #2563eb，再写color: color-mix(...)，并用@supports (color: color-mix(in srgb, red, blue))包裹整块逻辑 - 检查最终产物：打开编译后 CSS 文件，搜索
color-mix，如果还存在，说明插件没生效或输入不符合要求
真正容易被忽略的是：你写的每一个 color-mix() 都得是“已知起点 + 已知终点 + 明确权重”，它不像 JS 函数能动态响应，而是一个构建期就该确定下来的静态值——插件只是帮你提前算出来而已。
