CSS变量不能直接存储calc表达式，因为变量展开是字符串替换而非运行时计算，旧版浏览器会将其视为无效值；应将calc写在使用处，变量仅存纯数字参数。
不能直接在CSS变量里存 calc(100% - 20px) 这类表达式并复用——变量值本身不参与运行时计算，var(--width) 只是字符串替换，浏览器不会二次解析里面的 calc。
为什么CSS变量不能直接存混合单位表达式
CSS变量存储的是静态值，不是计算逻辑。即使你写 --main-width: calc(100% - 240px);，再用 width: var(--main-width);，大多数浏览器（Chrome ≤109、Firefox ≤111）会把它当普通字符串丢弃，最终 width 为无效值。这不是语法错，而是变量机制决定的：变量展开发生在样式解析早期，calc() 需要更晚阶段的布局上下文才能求值。
-
var(--x)展开后必须是合法的CSS值（如200px、50%），不能是未求值的calc(...) - 只有 Chrome 110+、Firefox 112+ 开始支持变量内嵌
calc的稳定求值，但兼容性仍不可靠 - 常见现象：
width: var(--main-width);在 DevTools 中显示为invalid property value，控制台无报错，样式静默失效
正确做法：把 calc 写在使用处，变量只存数字或基础单位
让变量承担“可配置参数”的角色，把实际运算留在属性声明里。例如侧边栏固定宽 + 主区自适应：
:root {
--sidebar-width: 240;
--header-height: 64;
}
<p>.main {
width: calc(100% - var(--sidebar-width) <em> 1px);
height: calc(100vh - var(--header-height) </em> 1px);
}-
--sidebar-width存纯数字240，不是240px；乘1px是为了生成带单位的值，这是唯一安全的拼接方式 - 不能写
calc(100% - var(--sidebar-width) px)——px不能紧贴变量，必须参与运算 - 同理，
var(--header-height) * 1px比var(--header-height)px更可靠，后者在部分旧浏览器中会被截断
需要动态换算 rem 时，变量怎么配合 calc
当设计系统用 rem 单位，但设计稿给的是像素值（比如间距 8px），且根字号可能非 16px 时：
立即学习“前端免费学习笔记（深入）”；
:root {
--base-font-size: 16; /* 必须是纯数字 */
--space-xxs: 2;
--space-xs: 4;
--space-s: 8;
}
<p>.button {
padding: calc(var(--space-s) / var(--base-font-size) <em> 1rem)
calc(var(--space-m) / var(--base-font-size) </em> 1rem);
}-
--space-s存8，代表“8px”，不是8px；单位转换逻辑全在calc里完成 - 除法右侧必须是无单位数，所以
--base-font-size绝对不能写成16px - 如果项目用
font-size: clamp(14px, 2.5vw, 18px)动态根字号，这套方案就失效——calc无法读取运行时计算出的字号值，只能退回到 JS 或媒体查询适配
transform 里用 calc 混合单位时的变量技巧
比如实现「水平居中后再右偏移 20px」，translateX 需要同时处理百分比和像素：
.card {
--offset-x: 20;
transform: translateX(calc(-50% - var(--offset-x) * 1px));
}- 不要尝试
translateX(calc(-50% - var(--offset-x)px))，空格缺失会导致整个calc被忽略 -
var(--offset-x) * 1px是最简健壮写法，比calc(var(--offset-x) * 1px)少一层嵌套，降低解析失败风险 - 注意：transform 的百分比基于元素自身宽高，不是父容器，这点和 margin/padding 不同，但
calc里的50%依然指该元素自身的宽度
真正容易被忽略的不是语法细节，而是变量和 calc 的职责边界：变量负责配置，calc 负责运算；把运算塞进变量名里（比如 --main-width-calc），只会让维护成本翻倍，且在多数浏览器里根本跑不通。
