calc()中var(--x)无单位时乘除失败，因乘法要求一侧有单位、除法要求除数为纯数字；加减则因量纲不明被丢弃，须显式带单位或用1px等升格。
calc() 里 var(--x) 没单位，为什么乘除会失败？
var(--x) 本身不带单位，它只是一个裸数字（calc() 的乘除规则强制要求：
- 乘法
<em></em>至少一侧必须是无单位数字（✅ OK），但另一侧必须有单位（❌var(--x) var(--y)不行） - 除法
/右侧（除数）必须是无单位数字（✅100px / 2），左侧可以带单位；但100px / var(--y)要求--y是纯数字，不能是2px或2rem
常见错误写法：
-
width: calc(var(--size) * 2);→ ❌--size若定义为50（无单位），结果仍是无单位，CSS 拒绝应用 -
height: calc(100% / var(--rows));→ ✅ 只要--rows是4这类纯数字就合法 -
left: calc(var(--offset) * 1px);→ ✅ 用1px显式赋予单位，把裸数字“升格”为长度
为什么不能写 calc(var(--a) + var(--b))？
加减运算要求操作数属于同一量纲类别（如都为 px，也不是 %，更不是 em。所以整条声明会被丢弃。
典型报错现象：
- DevTools 中该属性显示为 “invalid value” 或直接灰掉
- 元素尺寸回退到默认值（如
auto或继承值） - 尤其在 Safari 15.4 之前，连警告都不给，静默失效
正确做法只有两种：
- 让变量自带单位：
:root { --gap: 16px; --width: 200px; }，再写width: calc(var(--width) - var(--gap)); - 用乘法“补单位”：
width: calc(var(--base) * 1rem);，前提是--base是数字（如2）
Less/Sass 编译时把 calc() 算错了怎么办？
低版本 Less（calc(100% - 20px) 当作算术表达式提前计算，误判为 calc(80%)，导致单位丢失、响应性崩溃。
Sass 同样危险：如果写成 width: calc(#{$gap} * 2)，而 $gap: 10（无单位），编译后就是 calc(20) —— 浏览器直接忽略。
规避方式很简单：
- 所有 Sass/Less 变量参与
calc()前，**必须显式带单位**：$gap: 10px; - 避免在预处理器里做跨单位运算（如
1rem + 10px），交给calc()运行时处理 - 用
// sass:ignore注释或字符串拼接绕过编译（仅限紧急场景）
实际项目中最容易被忽略的兼容点
calc() 的“动态性”完全依赖变量是否真正在运行时更新。很多人写了 var(--height) 却忘了 JS 没调用 element.style.setProperty('--height', '400')，或者把变量定义在 :root 却没考虑组件隔离需求。
更隐蔽的问题：
- iOS Safari 15–16 对
calc(100vh - 2rem)初始渲染可能返回0，换成calc(100vh - 32px)更稳 - Grid 中用
grid-template-columns: calc(var(--item-w) * 1fr)是错的——1fr不是长度单位，不能参与calc()运算 -
min-width: calc(var(--min) + 1px)中，若--min是0，必须写成0px，否则0 + 1px会被视为类型不匹配
真正要盯住的，从来不是语法能不能写出来，而是那个变量值——它有没有单位、有没有在对的时间变成对的数、有没有被旧引擎悄悄吞掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
