旧版Safari（≤15.4）将var(--s)返回的"70%"误解析为带引号字符串，导致hsl()拒绝接收而整条声明静默失效；必须确保变量定义无引号、无空格、单位紧贴数值，如--primary-s: 70%;。
为什么直接用 hsl(var(--h), var(--s), var(--l)) 在某些 Safari 版本里会失效
不是变量没定义，而是 var(--s) 返回的字符串（比如 "70%"）被旧版 Safari（≤15.4）解析时卡在引号或空格上，导致整个 hsl() 声明被丢弃。你看到的“颜色没了”，其实是浏览器静默 fallback 到 transparent 或继承色。
必须确保所有 HSL 分量变量定义时不带引号、不带空格、单位紧贴数值：
-
--primary-h: 210;✅（纯数字，无单位） -
--primary-s: 70%;✅（百分比紧挨数字） -
--primary-l: 55%;✅ -
--primary-s: "70%";❌（引号触发解析失败） -
--primary-s: 70 %;❌（空格导致 Safari 拒绝）
calc() 动态生成 HSL 值时，色相越界怎么不出错
hsl(375, 70%, 60%) 在 Chrome/Firefox 里会自动归约为 hsl(15, 70%, 60%)，但 Safari ≤15.4、@keyframes 插值、color-mix() 场景下可能崩溃或截断为无效值——这不是“能用”，是“暂时没崩”。
安全做法只有一条：别让色相变量本身越界。用 JS 控制时，强制模 360：
立即学习“前端免费学习笔记（深入）”；
element.style.setProperty('--hue', ((currentHue + 30) % 360).toString());
纯 CSS 方案？改用 lch()（Chrome 111+ / Safari 16.4+ / Firefox 112+）：
color: lch(60% 30 calc(220deg + 15deg));
它原生支持色相自动绕圈，calc() 直接写在参数位，无需拆变量、不担心越界。
模块间传递 HSL 变量，如何避免深色模式下颜色跳变
深色模式切换时，如果只改 --primary-l（比如从 55% → 35%），但同时又在另一个模块里写了 hsl(var(--primary-h), 90%, 40%) 这种硬编码亮度，那这个模块的颜色就不会响应主题变更，观感突兀。
模块化传递的关键是只传基础变量，不传计算结果：
- 主模块定义：
--brand-h: 210; --brand-s: 70%; --brand-l-base: 55%; - 子模块消费：
background: hsl(var(--brand-h), var(--brand-s), var(--brand-l-base)); - 禁用态写法：
color: hsl(var(--brand-h), 15%, calc(var(--brand-l-base) + 15%));（仍依赖 base 变量）
禁止在子模块里写死 hsl(210, 70%, 40%) 或 --color-disabled: hsl(210, 15%, 70%) ——这等于把变量“冻结”在那一刻，失去响应性。
为什么 hsl(none, none, none) 会导致过渡完全失效
这不是兼容性问题，是语法级错误。hsl() 要求三个参数都必须是可解析的有效值。写 none，浏览器直接忽略整条声明，transition 失去起始/结束锚点，中间帧根本无法计算。
真正可动画的写法必须满足：
- 色相带
deg单位（210deg比210更稳妥） - 饱和度和亮度严格带
%（70%，不能是70或0.7） - 变量必须配合
@property才能动画（仅靠var(--h)不行）
例如要让色相平滑旋转：
@property --hue { syntax: "<angle>"; inherits: false; initial-value: 210deg; }
.rotating { background: hsl(var(--hue), 70%, 60%); transition: --hue 0.3s; }
最易被忽略的点是：你以为只是换个颜色，其实模块间变量耦合一旦松动（比如某个子模块漏了 var(--brand-l-base)），深色模式就会局部失守；而色相越界表面看不出来，却会在动画插值或 color-mix 场景下突然暴露——这些都得靠 DevTools 的“颜色拾取器+实时修改”反复验证，不能只信代码没报错。
