不能只定义--primary-color: hsl(210, 70%, 60%)，因浏览器将其视为字符串，无法在hsl()中解析var(--primary-color)，导致回退为初始色或透明；且锁死h/s/l维度，无法单独调整任一参数。
直接拆开 H、S、L 为独立 CSS 变量，是唯一能真正“按需调整”的方式；把整个 hsl() 塞进一个变量或漏掉 %，后续所有微调都会失效。
为什么不能只定义一个 --primary-color: hsl(210, 70%, 60%) ？
这种写法看似省事，实则锁死全部维度：改色相时必须重写整串，无法单独加减 10°；想让所有按钮文字变暗 5%，就得手动遍历每个选择器去改 l 值。更糟的是，浏览器会把 hsl(210, 70%, 60%) 当作字符串，var(--primary-color) 在 hsl() 里根本无法解析——直接回退到初始色或透明。
正确做法是把三个参数完全解耦：
:root { --hue: 210; --sat: 70%; --light: 60%; }- 每个
hsl()调用都显式包裹：hsl(var(--hue), var(--sat), var(--light)) - 缺一不可：
var(--sat)和var(--light)必须带%，否则解析失败
hsl() 中使用 var() 的语法陷阱
常见错误不是逻辑错，而是格式错——浏览器对空格、逗号、单位极其敏感：
-
hsl(var(--hue),var(--sat),var(--light))✅（推荐无空格，兼容性最稳） -
hsl(var(--hue), var(--sat), var(--light))❌（旧版 Safari 可能拒解析） -
hsl(var(--hue), 70%, 60%)❌（混合硬编码与变量，70%不被识别为合法值） -
hsl(var(--hue), var(--sat), calc(var(--light) - 10%))⚠️（Chrome 111+/Firefox 115+ 支持，但 Safari 16.4 以下不认嵌套calc()）
真实调试建议：打开 DevTools 颜色拾取器，点开小方块 → 切换到 HSL 模式 → 拖动滑块实时看数值变化，比手算靠谱得多。
如何安全地用 calc() 衍生颜色变体？
只要目标浏览器明确支持（当前主流已无问题），calc() 是最可控的衍生手段，但必须遵守两个硬约束：
-
calc()只能用于单个参数内部，比如var(--light)可以写成calc(var(--light) - 15%)，但不能写calc(var(--hue) + 30)—— 因为calc()结果不会被当作数字传入hsl()函数 - 亮度和饱和度的运算必须带单位：
calc(var(--light) + 10%)✅，calc(var(--light) + 10)❌（少%直接失效） - 禁用态常用写法：
color: hsl(var(--hue), var(--sat), calc(var(--light) - 25%));
注意：calc(var(--hue) + 30) 在 hsl() 里永远不工作，别试。真要动态偏移色相，只能靠 JS 读取再重设 setProperty()。
深色模式切换时最容易忽略的细节
很多人以为改 --light 就够了，但实际中常出现文字可读性崩坏：
- 背景从
hsl(210, 70%, 95%)切到hsl(210, 70%, 15%)，文字若还用hsl(210, 70%, 20%)，对比度会低于 4.5:1 - 解决方案不是死守同一
--hue，而是为文字色另设锚点：--text-light: 20%; --text-dark: 90%，再配合媒体查询切换 - Shadow DOM 内部组件如果没继承
:root变量，得显式用:host或inherit拉取，否则主题不生效
真正麻烦的从来不是怎么写，而是哪些元素该联动、哪些该隔离、哪些明度阈值会触发 WCAG 对比度告警——这些没法靠变量自动推导，得靠设计系统文档一条条对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
