不能直接在:root里写--primary: hsl(210, 85%, 60%)，因CSS变量存储为字符串，浏览器不解析hsl()函数，var(--primary)会失效；必须拆分为--hue、--sat、--light三个变量并规范单位与范围，才能被calc()安全运算和JS精准控制。
为什么不能直接在:root里写 --primary: hsl(210, 85%, 60%)
这样定义的变量本质是字符串字面量，JS调用 document.documentElement.style.setProperty('--primary', 'hsl(240, 85%, 60%)') 后，浏览器不会解析其中的函数逻辑，var(--primary) 在属性中仍被当作无效值处理，最终回退为透明或继承色。DevTools 里会显示划掉状态，且 computed styles 中取不到真实颜色值。
必须拆成 --hue、--sat、--light 三个独立变量
只有拆开才能被 calc() 安全运算，也才能被 JS 精准控制。常见错误包括：
-
--hue必须是纯数字（如210），不带单位；否则calc(var(--hue) + 30)会失效 -
--sat和--light必须带%单位（如85%、60%），因为它们是百分比值，calc()对单位敏感 -
--light的数值范围是0–100，不是小数；写成0.6或60（缺%）都会导致整条hsl()声明静默失效 - Safari ≤15.4 不支持
hsl(var(--h), var(--s), calc(var(--l) - 15%))，稳妥做法是提前算好并声明为新变量，如--light-hover: 45%
用 hsl(var(--hue), var(--sat), var(--light)) 替代所有颜色声明
所有最终生效的颜色属性（如 color、background-color、border-color）都必须显式调用该函数，不能试图拼接字符串或用单变量兜底。例如：
button {
background-color: hsl(var(--hue-primary), var(--sat-primary), var(--light-primary));
}
button:hover {
--light-primary: calc(var(--light-primary) - 8%);
background-color: hsl(var(--hue-primary), var(--sat-primary), var(--light-primary));
}注意：transition 只能作用于 background-color 这类已计算出的颜色值，无法对 --light-primary 变量本身做动画；色相超出 360 时浏览器自动取模，无需手动 mod。
立即学习“前端免费学习笔记（深入）”；
生成深浅阶梯色时只动 --light，别碰 --hue 和 --sat
人眼对明暗最敏感，固定色相与饱和度后仅调节亮度，才能保证视觉连贯性。实操约束：
- 浅色背景文字建议用
calc(var(--light-primary) + 25%)，但上限封顶92%，否则泛白刺眼 - 深色背景主色建议用
calc(var(--light-primary) - 25%)，下限卡死15%，避免失色或渲染异常 - 禁用态推荐大幅降饱+提亮：如
--sat-disabled: calc(var(--sat-primary) * 0.2)+--light-disabled: calc(var(--light-primary) + 15%) - 别用
rgba(var(--primary), 0.8)——CSS 不允许变量直接塞进函数参数，会报Invalid property value
最容易被忽略的是：所有衍生色都依赖你提前把基础 HSL 拆解到位；从十六进制转 HSL 必须在构建时或 JS 初始化阶段完成，纯 CSS 无法反向解析 #4a6fa5。
