color-mix()需postcss处理因其仅chrome111+/edge111+/safari16.4+原生支持，firefox及旧浏览器完全不支持，且属语法级新特性，遇未知函数会直接丢弃整条声明，故必须用postcss-color-mix等插件降级转换。
color-mix() 为什么需要 PostCSS 处理
因为 color-mix() 目前仅在 Chrome 111+、Edge 111+ 和 Safari 16.4+ 中原生支持，Firefox 完全不支持（截至 2024 年中），且所有旧版浏览器均无实现。它不是“加前缀就能用”的属性，而是语法级新特性——浏览器解析器遇到不认识的函数会直接丢弃整条声明，连警告都不报。所以不能靠 autoprefixer，必须用能做语法转换的插件提前降级。
postcss-color-mix 插件的实际配置与限制
目前最常用的是 postcss-color-mix 插件（注意不是 postcss-preset-env 内置功能）。它把 color-mix(in srgb, red 60%, blue 40%) 转成等效的 linear-gradient 或静态色值，但有硬性前提：
- 只接受字面量颜色，
var(--primary)、currentColor、env()全部不支持，否则构建时报错或静默跳过 - 必须显式写出色彩空间，
in srgb或in oklab缺一不可；写成in SRGB（大写）或漏掉in会导致插件无法识别 - 权重必须是
<percentage></percentage>，red 0.6不行，red 60（缺%）也不行，必须写red 60% - 输出 fallback 方式取决于配置：可选生成一个近似十六进制值（精度有限），或退为双色
linear-gradient(90deg, #f00 60%, #00f 40%)用于 background
如何与 CSS 变量协同工作
color-mix() 本身不支持变量，但你可以用构建时替换绕过限制：
- 在
postcss.config.js中启用postcss-custom-properties（来自postcss-preset-env），并设preserve: false，让变量先展开成字面量 - 确保
postcss-color-mix在postcss-custom-properties之后执行，顺序错了就还是var(--primary) - 示例输入：
background-color: color-mix(in srgb, var(--primary) 70%, white 30%);→ 先被展开为color-mix(in srgb, #2563eb 70%, white 30%)→ 再被转成#81aef2或渐变 - 注意：如果变量定义在 JS 里动态注入，或依赖
@media条件切换，则构建时无法预知，这条路走不通
fallback 策略必须手动写，不能依赖层叠
别指望像 color: #333; color: color-mix(...); 这样靠后声明覆盖——当 color-mix() 无效时，整个声明被丢弃，浏览器会回退到上层继承值（可能是透明、黑色或别的意外色）。正确做法是：
- 对关键颜色，始终提供明确 fallback：
color: #6b7280; color: color-mix(in srgb, #374151 80%, #f9fafb 20%); - 若用
postcss-color-mix输出了静态色值，记得检查它是否足够接近原意（尤其在深色模式下，srgb和oklab的灰阶表现差异明显） - 避免在
background复合属性里嵌color-mix()，如background: color-mix(...) no-repeat;→ 整个background声明会失效
真正难处理的从来不是语法转换，而是色彩空间语义丢失——color-mix(in oklab, ...) 混合出的中间灰，在 sRGB fallback 里可能偏冷或发暗，这点光靠插件无法自动校正。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
