原生 css 的 color-mix() 和 hsl(from ...) 已可替代预处理器的 mix()、lighten()/darken()，但需注意色彩空间（推荐 oklch）、权重声明、calc() 动态计算及浏览器兼容性；复杂条件逻辑仍需预处理器。
预处理器的 lighten()、darken()、mix() 等颜色函数正在被原生 CSS 能力替代，不是因为它们变弱了，而是浏览器终于提供了更可控、更动态、且无需编译的替代路径——前提是你的目标环境支持现代 CSS 特性。
color-mix() 是 mix() 的直接平替，但色彩空间必须选对
color-mix() 在 Chrome 111+、Safari 16.4+、Firefox 117+ 可用，它能按比例混合两种颜色，且支持指定色彩空间。关键点在于：用 in oklch 比 in srgb 更符合人眼感知，避免在暗色背景下“越调越灰”的失真问题。
- 正确写法：
color-mix(in oklch, #3498db 70%, white 30%)—— 接近 Sass 的mix(#3498db, white, 30%)，但输出是运行时计算的 - 错误写法：
color-mix(in srgb, #3498db, white)—— 缺少权重和色彩空间声明，浏览器会忽略整条规则 - 不能省略权重：
color-mix(in oklch, #3498db, white)不合法；必须写成#3498db 50%, white 50%或明确比例
Relative Color 语法让 lighten()/darken() 失去存在必要
预处理器的 lighten($color, 10%) 是编译期静态操作，一旦输出就固化为某个 HSL 值。而 hsl(from var(--primary) h s calc(l - 10)) 是每次渲染都重新读取 --primary 当前值、拆通道、做算术、再合成——深色模式切换后自动生效，无需 JS 干预或重新构建。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 必须配合
calc()才有动态意义，单独hsl(from red h s l)等价于red，无实际价值 - HSL 通道是整数（
l: 0–100），不能写calc(l - 10%)；单位错误会导致整条声明失效 - 旧版浏览器不支持
from语法，需用@supports (color: hsl(from red h s l))包裹并提供降级方案
原生方案不解决所有问题，反而暴露新约束
你没法用 color-mix() 或 hsl(from ...) 实现 Sass 中的嵌套条件逻辑，比如 “如果主题是深色，就用 oklch() 调亮；否则用 color-mix() 加白”。这类决策仍得靠预处理器的 @if + @else 在编译期完成。
-
var(--color)是字符串，不能直接参与hsl()函数参数；必须先定义为--primary-h: 204这类分通道变量 -
color-mix()不支持三色以上混合，darken($color, 20%)若依赖多层嵌套计算，原生目前无等效表达 - 所有原生颜色函数都要求浏览器支持对应色彩空间（如
oklch()在 Safari 16.4+ 才稳定），不能只看是否支持color-mix()
真正该切换的信号不是“浏览器支持了”，而是你项目里 90% 的颜色派生都只是单步调光/加白/混色，且不需要跨断点条件编译——这时候把 darken($brand, 15%) 拆成 --brand-light: color-mix(in oklch, var(--brand), white 15%)，反而更轻、更活、更易调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
