直接用hsl()函数写css变量会失败，因为css不支持在hsl()内嵌套var()进行动态插值，浏览器将视为无效值而回退为透明或黑色；正确做法是将h、s、l拆分为独立变量（如--hue: 240; --sat: 100%; --light: 50%），再于属性中显式调用hsl(var(--hue), var(--sat), var(--light))实现动态组合。
为什么直接用 hsl() 函数写 CSS 变量会失败
直接在 :root 里写 --primary: hsl(240, 100%, 50%) 没问题，但一旦想动态改色调（比如旋转色相），hsl() 本身不支持变量插值——CSS 不允许在函数体内嵌套 var(--hue)，浏览器会当作无效值丢弃。常见错误现象是颜色回退到默认黑/透明，或 DevTools 显示 hsl(NaN, …)。
真正可行的路径是：把 HSL 的三个分量（hue、saturation、lightness）拆成独立变量，再在使用处拼成完整 hsl() 值。
-
--hue存整数（0–360），--sat和--light存带单位的百分比（如100%或50%） - 所有
hsl()调用必须写在最终生效的属性里，不能提前拼字符串 - 不要试图用
calc()拼接字符串，CSS 不支持字符串拼接
如何用 var() 动态组合 HSL 值实现色调旋转
关键点在于：每个要用到颜色的地方，都得显式调用 hsl(var(--hue), var(--sat), var(--light))。例如按钮悬停时旋转 30°：
:root {
--hue: 240;
--sat: 100%;
--light: 50%;
}
<p>button {
background-color: hsl(var(--hue), var(--sat), var(--light));
}</p><p>button:hover {
--hue: calc(var(--hue) + 30);
background-color: hsl(var(--hue), var(--sat), var(--light));
}</p>
注意：calc() 只对数值有效，所以 --sat 和 --light 必须带单位（%），而 --hue 不能带单位（否则 calc(var(--hue) + 30) 会报错）。
- 色相超出 360 时，浏览器自动取模（
390→30），不用手动mod - 如果要支持动画，
transition需作用在background-color上，不是变量本身 - 避免在伪元素或复杂选择器中重复写
hsl(...)，可提取为background: var(--color-primary)，但前提是--color-primary是实时计算的（见下一点）
能否用单个变量存预计算的 HSL 字符串？
不能。像 --color: "hsl(" var(--hue) ", " var(--sat) ", " var(--light) ")" 这种写法无效——CSS 变量不支持模板字符串，引号内的内容会被当作文本字面量，而非可解析的颜色值。
唯一绕过方式是 JavaScript 注入，但失去纯 CSS 的优势。例如：
document.documentElement.style.setProperty(
'--color-primary',
`hsl(${hue}, ${sat}%, ${light}%)`
);
这适合需要运行时计算的场景（如根据时间或滚动位置调色），但会增加 JS 依赖，且无法被 @media 或 @supports 直接响应。
- CSS 自身无字符串操作能力，别在变量里存“表达式”
- 若需多套主题色，建议用不同变量组（
--hue-brand/--hue-accent），而非复用同一组变量 - IE 完全不支持
hsl()中的var()，如需兼容，得降级为预设色值表
旋转时饱和度和明度要不要跟着变？
纯色调旋转只动 --hue，但真实设计中常需微调饱和度或明度来保持可读性。例如从蓝色（hsl(240, 100%, 50%)）转到黄色（hsl(60, 100%, 50%)）时，黄底黑字对比度骤降。这时可以：
- 固定
--sat和--light，靠字体颜色反色补偿（如color: hsl(calc(var(--hue) + 180), var(--sat), 30%)） - 用
clamp()限制明度范围：--light: clamp(30%, calc(50% - var(--hue) * 0.05), 70%)（需支持clamp()的浏览器） - 避免在
hsl()外部做复杂计算，CSS 解析器对嵌套函数容忍度低，易静默失败
最稳的做法：色调旋转归旋转，对比度保障归另一套逻辑——比如用 color-scheme: dark 触发整套暗色变量，而不是靠单个 --hue 硬扛所有场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
