color-mix() 是浏览器运行时动态计算的颜色混合函数，支持色彩空间感知（如 oklch）、设备色域适配与响应式调色，但仅限 chrome 111+、edge 111+ 和 safari 16.4+ 原生支持，firefox 需手动启用 flag；它必须配合静态色值 fallback 使用，不接受 css 变量，语法强制要求显式色彩空间与权重，与 sass 等预处理器的编译期静态拍平有本质区别。
color-mix() 是运行时计算，预处理器是编译期拍平
预处理器（如 Sass 的 mix()）在构建阶段就把颜色算成固定 #rrggbb，一旦输出就不可变；而 color-mix() 在浏览器里实时解析，能响应色彩空间变化、设备色域切换（比如从 sRGB 切到 Display P3），甚至未来支持动态色温适配。但前提是浏览器真支持它——目前只有 Chrome 111+、Edge 111+ 和 Safari 16.4+ 原生启用，Firefox 仍需手动开启 layout.css.color-mix.enabled 标志。
预处理器无法处理色彩空间语义，color-mix() 可以
mix($primary, $secondary, 60%) 默认按 sRGB 线性插值，结果常发灰，尤其在蓝紫/高饱和区域；color-mix(in oklch, #3b82f6 60%, #8b5cf6 40%) 则按人眼感知均匀的 OKLCH 空间混合，亮度过渡更自然。但注意：in oklch 在 Safari 16.4+ 支持，在 Firefox 119+ 才可用（且依赖 flag），而预处理器根本不知道 OKLCH 是什么——它只认 RGB/HSL 字面量。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
预处理器能用变量，color-mix() 不能，但代价是失去运行时灵活性
你可以在 Sass 里写 @include button-theme($brand-color)，所有衍生色随变量一键更新；但 color-mix() 连 var(--brand) 都不认，必须写死 #3b82f6 或 hsl(220 80% 50%)。表面看预处理器更“灵活”，实则把设计系统锁死在编译产物里：换主题要重跑构建，无法做 CSS 自定义属性驱动的深色模式平滑切换。而 color-mix() 虽不能读变量，却可配合 @media (prefers-color-scheme: dark) + 静态 fallback 实现轻量响应式调色。
fallback 和降级逻辑完全不同
预处理器生成的 CSS 没有 fallback 概念，它输出就是最终值；color-mix() 必须靠层叠 fallback：color: #2563eb; color: color-mix(in srgb, #3b82f6 85%, black 15%);。漏掉第一行，旧浏览器里文字可能直接继承透明或黑色；写成两个独立规则（比如拆到不同 class）就失效。更关键的是：@supports (color: color-mix(in srgb, red, blue)) 检测本身不可靠——它只判函数名是否被识别，不校验权重格式或色彩空间拼写（in SRGB 大写就静默失败）。
color-mix() 适合需要色彩空间精度、设备自适应、且能接受有限浏览器覆盖的现代 UI。两者不是替代关系，而是分工关系——很多团队实际用法是：预处理器生成基础色板，color-mix() 在 runtime 做微调。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
