用css变量控制hsl色相实现主题切换，只需定义--primary-hue并用于hsl(var(--primary-hue), 70%, 60%)，改色相不扰动饱和度与明度；hsl比hex更适配变量管理，因h为独立维度；注意作用域与shadow dom隔离问题。
怎么用CSS变量控制HSL色相实现主题切换
直接改--primary-hue就能换整套主色，不用挨个调hsl()里的数字。关键在把HSL的h（色相）抽成变量，s和l保持固定或另设变量。
- 定义变量时写
:root { --primary-hue: 210; }，然后用hsl(var(--primary-hue), 70%, 60%) - 别把整个
hsl(210, 70%, 60%)塞进一个变量——那样就失去“只调色相”的灵活性 - 浏览器兼容性没问题：Chrome 49+、Firefox 31+、Safari 9.1+ 都支持
var()嵌入hsl()
CSS变量里能直接运算色相值吗
不能。CSS变量本身不支持数学运算，calc(var(--base) + 30)在hsl()里会失效——浏览器不解析calc结果为数值。
- 常见错误：写
hsl(calc(var(--hue) + 30), 70%, 60%)→ 渲染失败，回退到初始色或透明 - 正确做法：预设多个色相变量，比如
--hue-blue: 210、--hue-indigo: 250，切换时改hsl(var(--hue-indigo), ...) - 如果真要动态偏移，得靠JS：读取
getComputedStyle拿到当前--primary-hue，加减后用element.style.setProperty()重设
为什么HSL比HEX更适合用变量管理颜色
HSL的h是独立维度，改它不影响明暗和饱和度；而HEX或RGB改一个值，色相、亮度、对比度全乱。
- 场景举例：深色模式下想让按钮保持“同色系但更暗”，只需调
--primary-lightness: 40%，色相不变 - HEX做不到这点——
#3b82f6变暗不是简单改最后两位，得转HSL再调l，再转回HEX - 参数差异：
hsl(210, 70%, 60%)比rgb(59, 130, 246)更直观反映“蓝调+高饱和+中等亮”
继承与作用域导致的色相变量失效怎么办
变量没生效，大概率是作用域错了——:root定义的变量不会自动穿透shadow DOM，或被局部:host样式覆盖。
- 检查是否在组件内部写了
:host { --primary-hue: 0; }，却忘了在:host::part(button)里重新声明 - Shadow DOM里要用
:host { --primary-hue: 210; }或在JS中用this.shadowRoot.documentElement.style.setProperty() - 避免在媒体查询里重复定义同一变量，不同断点间没加
!important会导致覆盖混乱
--primary-hue可能被中间层无意劫持，得一层层查computed style确认源头。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
