<p>var()不能直接在calc()中做算术运算，因为其展开结果是无单位字符串（如"255"），而calc()要求操作数为带单位的可计算类型；必须先用calc()预计算并存入新变量（如--dynamic-r: calc(var(--base-r) - var(--offset))），再在rgb()等函数中引用var(--dynamic-r)。</p>
var() 本身不执行计算，只做值替换；CSS 变量存储的是字符串，不是数值，浏览器不会自动把 --r: 255 当成数字参与 calc() 运算。
为什么 var(--r) 不能直接放进 calc() 做算术？
这不是浏览器 bug，而是 CSS 规范限制：calc() 要求操作数是“可计算类型”（如 px、%、deg），而 var(--r) 展开后只是纯数字字符串 "255"，没有单位、没有类型标记，无法被 calc() 识别为合法操作数。
常见翻车写法：
-
color: rgb(calc(var(--r) * 0.8), var(--g), var(--b));→ 整条声明被丢弃 -
background-color: hsl(calc(var(--hue) + 30), 70%, 60%);→var(--hue)不被解析，calc()拿不到有效输入
calc() 在颜色上下文中哪些地方能用？
只有颜色函数的**参数本身支持数值计算**时才可行，且必须满足类型匹配。关键不是“能不能写 calc()”，而是“该位置是否接受 calc() 返回的类型”。
立即学习“前端免费学习笔记（深入）”；
-
hsl()的h参数是角度 → 支持calc(120deg + 30deg)，但calc(var(--h))不行（--h缺少deg单位） -
rgb()各通道是无单位整数 → 支持rgb(calc(255 - 30), 128, 64)，前提是calc()内部所有操作数都是数字（不能是var(--offset)这种未带单位的变量） -
rgba()的 alpha 是number或percentage→rgba(0, 0, 0, calc(0.5 + 0.2))合法，但rgba(0, 0, 0, var(--alpha))就只是字符串替换
真正能落地的间接计算方案
把 calc() 放在变量赋值侧，让变量值“提前算好”，再用 var() 引入颜色函数——这是唯一符合规范且跨浏览器稳定的路径。
- 必须写成：
--dynamic-r: calc(var(--base-r) - var(--offset));，然后rgb(var(--dynamic-r), 128, 64) - 所有参与
calc()的源变量必须是纯数字（不能带引号，不能是"100"） - IE 完全不支持
calc()在自定义属性中使用，需降级为 JS 注入或静态值 - 若目标是调色（如明暗、混合），优先用
color-mix()或color-contrast()，它们语义明确、自动处理色彩空间，比硬套calc()更可靠
JS 动态注入才是颜色映射的主力
CSS 变量本质是样式层容器，不是运行时计算器。想根据数据实时生成颜色（比如图表中数值→色阶），必须由 JS 算出最终颜色字符串（如 rgb(80, 120, 200)），再通过 element.style.setProperty('--mapped-color', color) 注入。CSS 只负责接收和渲染，不参与运算。
容易被忽略的一点：CSS 中的 var(--x, red) 降级值只在变量为空或语法错误时生效，它不解决“变量存在但值不是数字”的问题——比如 --r: "255"（带引号字符串）会导致 rgb(var(--r), ...) 失效，且降级值不会触发。
