<p>calc(-var(--offset)) 会失败，因 CSS 不允许一元负号直接作用于 var()；应改用 calc(0 - var(--offset)) 或 calc(-1 * var(--offset))，并统一变量存正值、方向由 calc() 控制。</p>
calc() 中直接对 CSS 变量取负会失败
当你写 calc(-var(--offset))，浏览器会报错或忽略——CSS 不允许一元负号直接作用于 var() 表达式。这不是语法错误，而是解析限制：var() 必须出现在可计算上下文中，而 -var(--x) 被视为非法 token 序列。
正确做法是把负号“包”进 calc() 内部，用 0 - var(--offset) 或 -1 * var(--offset)。
-
transform: translateX(calc(0 - var(--offset)));✅ 安全通用 -
margin-left: calc(-1 * var(--gap));✅ 明确乘法语义，便于后续扩展（比如乘以 2、0.5） - 避免
calc(-var(--x))❌ 所有主流浏览器均不支持
变量本身存负值会导致逻辑混淆
有人会把负值提前写进变量里，比如 --offset: -8px;，再用 calc(var(--offset))。这看似省事，但极易引发维护问题：变量名（如 --offset）失去语义一致性，调用方无法直觉判断方向；更麻烦的是，一旦需要动态反转（比如从左偏移变右偏移），就得改所有变量定义，而非只改一处计算逻辑。
- 推荐统一存正值：
--offset: 8px;，方向由calc()控制 - 方向敏感场景可拆分为
--offset-x和--offset-y，再配合calc(1 * var(--offset-x))或calc(-1 * var(--offset-x)) - 若用 JS 动态设置变量，也应传入绝对值，方向交由 CSS 计算层决定
乘法系数必须带单位或为纯数字
calc() 中的乘法操作数类型需匹配：单位值 × 数字 = 单位值；数字 × 数字 = 数字。如果你写 calc(var(--offset) * -2)，前提是 --offset 本身带单位（如 8px），否则会报错 invalid property value。
立即学习“前端免费学习笔记（深入）”；
-
--size: 16;（无单位）→ 只能用于calc(var(--size) * 1.5)这类纯数值运算（如font-size的缩放因子） -
--gap: 12px;（带单位）→ 可用于calc(var(--gap) * -0.5)，结果是-6px - 混合单位会失败：
calc(var(--gap) * var(--scale))中若--scale是2（无单位）则合法；若是2px则非法（px × px 无意义）
IE 不支持 calc() 中的变量，但支持 calc() 本身
IE 11 支持 calc()，但完全不识别 var()。所以 calc(-1 * var(--x)) 在 IE 下整条声明会被丢弃。如果还需兼容 IE，得回退到预设值 + 媒体查询或 JS 注入，不能依赖纯 CSS 变量方案。
- 渐进增强写法：
margin-left: -8px;<br>margin-left: calc(-1 * var(--offset));
—— IE 用第一行，现代浏览器覆盖 - 避免在关键布局中仅靠变量运算实现负偏移，尤其是涉及 flex/grid 对齐时
- PostCSS 插件（如
postcss-css-variables）可在构建时展开变量，但要注意它无法处理运行时 JS 修改的变量值
负偏移真正难的不是写法，而是让团队所有人理解：变量存什么、谁负责方向、哪里该做反转。一旦把负号塞进变量值里，就等于把业务逻辑（左 or 右）和数据耦合了——后面加个动画反向、响应式翻转，都得挖出所有 var(--offset) 手动改。
