目前不能在生产环境使用 oklch(from...) 或 hsl(from...) 语法，因所有主流浏览器稳定版均未实现该 css color 5 草案特性，导致样式静默失效；color-mix() 是当前最稳妥的替代方案，已获 chrome 111+、firefox 111+、safari 16.4+ 原生支持。
现在不能直接在生产环境用 oklch(from ...) 或 hsl(from ...) 这类语法，所有主流浏览器稳定版都不支持 —— 写了也白写，样式静默失效，控制台不报错，DevTools 里可能还显示“已应用”，但 computed value 是初始值或继承值。
为什么 hsl(from var(--primary) h s calc(l - 10)) 在 Safari/Chrome/Firefox 里没效果
这不是你写错了，是浏览器根本没实现该语法。CSS Color 5 的 from 关键字仍属草案阶段：
- Chrome 111+ 仅在开启
#css-relative-color-syntax实验 flag 时支持极简的color(from red)，且不支持var(--x)回溯 - Safari 15.4+ 声称支持
hsl(from ...)，但实测对自定义属性引用（var(--primary)）解析失败，整条声明被丢弃 - Firefox 完全不识别，
from一出现就跳过整条规则 - PostCSS、Sass 等工具链也无法解析这种嵌套引用，构建时不会展开，输出仍是无效语法
color-mix() 是目前最稳妥的“相对”替代方案
它已被 Chrome 111+、Firefox 111+、Safari 16.4+ 原生支持，无需 flag，可安全用于生产：
-
color-mix(in srgb, var(--primary) 80%, white 20%)→ 比原色浅 20% 的变体 -
color-mix(in srgb, var(--primary) 70%, black 30%)→ 更暗的禁用态色 -
color-mix(in srgb, var(--primary) 90%, transparent 10%)→ 微透底色，比直接改 alpha 更自然 - 注意：第一个颜色必须是确定值（如 HEX、RGB），不能是
var(--x)+color-mix()嵌套；需确保--primary本身是静态值（如#3b82f6），而非另一个函数调用
如果非要写 from 语法，必须用构建时转译
仅限开发阶段尝鲜或内部工具链可控场景，上线前必须降级为确定值：
- 用
postcss-relative-color插件：能将oklch(from #3b82f6 l c h)解析并计算成rgb(59 130 246)，但无法处理from var(--primary) -
postcss-preset-env（stage: 3）可降级部分 color 函数，但对from支持极弱，别依赖它保底 - 绝对禁止在
:root中写--derived: oklch(from var(--base) ...)—— 所有工具都解析不了这种变量链式引用 - 检查最终输出 CSS：必须看到
rgb(200 120 80)或#c87850这类硬编码值，而不是原样保留的oklch(from ...)
真正要注意的不是语法，而是亮度越界和感知偏差
就算某天浏览器全支持了 from，下面这些点照样让 UI 翻车：
-
calc(l - 30)可能让l变成负数，OLED 屏上渲染为不可控灰黑；得用max(10%, calc(l - 30)) -
oklch()的l是 0–1 小数，lch()的l是 0–100 整数，混用会出错 - 在深色模式下，
calc(s * 1.2)可能让高饱和色刺眼，而浅底配calc(s * 0.3)又容易发灰 —— 这些不是语法问题，是人眼感知建模问题 - 没有
@supports (color: oklch(0 0 0))包裹的 fallback，Safari 用户看到的就是未定义行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
