calc()不能直接计算颜色值，因CSS规范仅允许其处理长度、角度等基础数值类型；颜色属独立数据类型，浏览器会静默丢弃非法声明；hsl()参数可算但需注意单位与范围；color-mix()是更可靠的替代方案。
calc() 不能直接对颜色值做加减，不是写法问题，是 CSS 规范根本不允许。
color、#fff、rgb() 这些都不是可计算类型
calc() 只接受长度、角度、时间、频率、百分比、无单位数字等**基础数值类型**。颜色（哪怕写成 rgb(255, 0, 0) 或 #ff0000）在语法层面就不是“数值”，而是**独立的颜色数据类型**。浏览器解析时会直接跳过整条声明，不报错也不警告。
常见失效写法包括：
-
color: calc(#333 + #666);→ hex 不是数值，无法加 -
background: calc(red * 0.5);→ 命名色不可参与运算 -
border-color: rgb(calc(255 - 100), 128, 64);→calc()在rgb()内部不被解析，整条规则静默丢弃
hsl() 的 h/s/l 分量可以算，但必须单点控制
真正能用 calc() 的，只有 hsl() 和 hsla() 的三个参数本身——因为它们分别对应角度（h）、百分比（s, l），而这两类值天然支持 calc()。
但注意：你不能写 hsl(calc(var(--hue) + 10), ...) 然后指望它自动归一到 0–360；calc(370) 就是 370，浏览器不会取模，可能导致色相溢出、显示异常（比如变灰或意外偏色）。
安全做法是：
- 色相偏移控制在 ±30° 内，并手动留余量（如基色设为 200，上限只加到 330）
- 明度/饱和度用
%单位参与运算：calc(60% + 10%)✅，calc(60 + 10)%❌（单位不能后置） - 变量定义必须带单位：
--hue: 210;✅（无单位整数），--hue: 210deg;❌（不能和纯数字混算）
变量值没单位 or 运算符缺空格 = 整条失效
即便你绕开颜色函数、改用自定义属性间接控制，两个硬性条件仍常被忽略：
-
+和-两侧必须有空格：calc(100% - var(--offset))✅，calc(100%-var(--offset))❌（浏览器静默跳过） - 变量值必须自带单位：
--offset: 10px;✅，--offset: 10;❌（calc(100% - var(--offset))会被当成calc(100% - 10)，语法错误） - 0 也不能省略单位：
top: calc(0px + 10px);✅，top: calc(0 + 10px);❌
更靠谱的替代方案其实是 color-mix()
如果你目标是混合、明暗调节、主题适配，color-mix()（Chrome 111+、Safari 16.4+）比硬套 calc() 更语义化、更可靠：
background-color: color-mix(in srgb, #00f 70%, #fff 30%);
它原生支持插值、空间指定、权重分配，且不依赖变量单位、空格、范围约束。而 calc() 在颜色场景里，本质只是个“参数搬运工”，所有逻辑和边界都得你手动兜底——稍有疏忽，颜色就悄悄变了样，还很难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
