hsl()函数不支持直接嵌套var()，必须将HSL三要素拆分为独立变量：--hue为0–360整数，--sat和--light须带%单位；调用时禁用空格、确保定义在:root、setProperty需加--前缀且值传字符串；动画需配合@property声明syntax与initial-value。
hsl()函数里不能直接嵌套var()，必须拆成分量变量
浏览器解析hsl()时，会把hsl(var(--hue), var(--sat), var(--light))当成无效语法丢弃，尤其在旧版 Safari 中静默失效，最终渲染为透明或黑色。这不是 bug，是 CSS 函数参数不支持运行时变量插值的规范限制。
真正可行的做法是把 HSL 三要素拆成独立变量：
-
--hue存整数（0–360），不带单位 -
--sat和--light必须带%单位，如70%、55% - 所有
hsl()调用必须写在最终生效的属性中，例如color: hsl(var(--hue), var(--sat), var(--light));
为什么hsl(var(--h), 70%, 50%)能用但hsl(var(--h), var(--s), var(--l))常失败
关键在单位和解析器兼容性。部分 Safari（iOS 15.4 之前、macOS 12.3 以下）会把 var(--s) 返回的值当作带引号字符串（如 "70%"），而 hsl() 要求第二、三参数是合法百分比字面量，不是字符串。
避免失败的硬性要求：
立即学习“前端免费学习笔记（深入）”；
- 定义变量时不加引号：
--sat: 70%;✅，不是--sat: "70%";❌ - 调用时不要加空格：
hsl(var(--h),var(--s),var(--l))✅，hsl(var(--h), var(--s), var(--l))❌（Safari 16.4 以下直接跳过整条规则） - 确保所有分量变量都在 :root 定义，否则子元素可能读不到
JS 修改变量时，setProperty() 的三个易错点
颜色没变，大概率不是逻辑错，而是 setProperty() 写法踩了坑。
- 漏掉双短横线前缀：
document.documentElement.style.setProperty('hue', '180')❌，必须是'--hue'✅ - 传数字不加引号：在部分 Safari 上，
el.style.setProperty('--alpha', 0.3)可能异常；统一用字符串更稳：'0.3' - 改了
document.body.style却指望全局响应：body 不是 :root，伪类、根级选择器不会继承它的变量
动画色相流动必须配 @property 声明
只写 @keyframes { --hue: 0; } → { --hue: 360; } 不会动，因为 CSS 默认认为自定义变量不可动画。浏览器直接跳过插值，要么卡住，要么闪一下就结束。
必须显式注册可动画类型：
@property --hue {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
再配合跨边界关键帧（如 0% { --hue: 0; } 100% { --hue: 720; }）才能实现丝滑旋转。Chrome 100+ 和 Safari 15.4+ 支持，旧版本需降级为 requestAnimationFrame 手动更新。
最常被忽略的是：所有参与动画的变量（比如渐变中的 --hue-start 和 --hue-end）都得单独声明 @property，漏一个，整条渐变就卡死。
