css 无法提取 hue 值，因 hue() 等 color-mod 函数属 css color level 5 提案，尚未被主流浏览器稳定支持；hsl(from ...) 仅透传通道，不提供读取能力；可行方案仅限 js 解析、构建时 postcss 展开或人工维护 hsl 变量。
不能在任何稳定版浏览器中用 CSS 相对颜色语法提取 hue 值——该能力尚未实现，from 关键字和 hue() 等 color-mod 函数均未被支持。
为什么 hue(var(--primary)) 会静默失效
浏览器解析到不认识的函数（如 hue()、lightness()）时，直接跳过整条声明，控制台不报错也不警告。这不是语法写错了，而是规范还没落地：hue() 属于 CSS Color Level 5 的 color-mod 函数提案，目前（2026 年 9 月）Chrome 仅在实验 flag 下支持极简 color(from ...)，Firefox 和 Safari 完全忽略。Sass/Less 等预处理器也无对应内置函数，无法编译。
hsl(from ...) 不是提取工具，而是“通道透传”机制
写 hsl(from var(--primary) h s l) 并不会“提取出 hue”，它只是把 --primary 拆成三个变量并原样输出——等价于写死一个固定 HSL 值。真正能“拿到 hue”的唯一前提是：原始色本身是 HSL 格式且值可被浏览器解析（比如 --primary: hsl(217 91% 60%)），否则从 HEX 或 RGB 解析时，浏览器内部虽会转换，但不暴露中间通道供你读取。
- ✅ 可行（但非提取）：
background: hsl(from var(--primary) calc(h + 10) s l);—— 对色相做偏移，但你不能单独把它赋给另一个变量 - ❌ 不可行：
--hue: hue(var(--primary));或content: attr(--hue);—— 无此语法，CSS 不提供颜色通道读取 API - ⚠️ 注意：
h是 0–360 整数，不是带单位的值；calc(h * 1.2)合法，calc(h + 10deg)静默失败
现在能安全拿到 hue 的实际方案
如果必须在运行时获取或操作色相，只能绕过 CSS 原生能力：
- 用 JS 读取
getComputedStyle(el).getPropertyValue('--primary')，再用正则或new Color()（如colorjs.io）解析出 hue - 构建时用 PostCSS 插件（如
postcss-color-function）提前展开：把hsl(from #3b82f6 h s l)替换为hsl(217 91% 60%)，再从中提取数字 - 人工维护 HSL 版本变量：
--primary-hue: 217;，配合--primary-saturation: 91%;，确保所有派生色基于这些确定值计算
最麻烦的从来不是写对一行 hsl(from var(--c) calc(h + 5) s l)，而是你根本没法验证 h 的值是否真的来自当前主题色——它只在你用 HSL 定义 --c 且浏览器成功解析时才“存在”，其他情况全是静默 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
