calc()报错但控制台无提示，八成因加减号两侧缺空格；乘除建议加空格防预处理器异常；所有数值包括0必须带单位；预处理器变量需插值；自定义属性值也须带单位。
calc() 报错但控制台没提示？八成是加减号两侧缺空格——浏览器直接跳过整条声明，不是报错，是静默丢弃。
加减运算符前后必须有空格
浏览器解析 calc() 时，+ 和 - 是歧义符号：可能是运算符，也可能是数值的正负号。没空格，它会把 100%-20px 拆成 100% 和 -20px，而 -20px 不是合法单位，整个表达式被判非法，整条 CSS 规则被忽略。
-
width: calc(100% - 20px)✅ 正确 -
left: calc(-50% + 10px)✅ 负号属于数值，+前后仍需空格 -
height: calc(100vh-30px)❌ 失效，DevTools 里都看不到这条规则 -
margin: calc(100%+20px)❌ 同样无效，+左侧缺空格
乘除运算符也建议统一加空格
* 和 / 虽然规范不强制空格，但在预处理器（Sass/Less）或某些 WebView 中，不加空格可能触发提前计算或解析异常。
-
font-size: calc(1rem / 1.2)✅ 安全写法 -
width: calc(4 * 25%)❌ Less 可能编译成calc(100%)，失去运行时动态性 -
grid-column-end: calc(2 + 1)❌ 错误：加法不能用于无单位纯数字，且缺空格
所有数值都得带单位，0 也不能例外
0 在 calc() 里不是“零”，而是类型推导失败的源头。浏览器无法判断它是 0px、0% 还是 0em，于是整条表达式罢工。
-
top: calc(0px + 10px)✅ 明确长度类型 -
padding: calc(0% + 12px)✅ 允许混合单位（注意兼容性） -
line-height: calc(0 + 1.5)❌0无单位，line-height虽本身无单位，但calc()内部仍需类型一致 -
height: calc(0 + 50vh)❌ 必须写成calc(0vh + 50vh)或calc(0px + 50vh)
Sass/Less 中变量必须插值或转义
预处理器会在构建阶段处理变量，不插值就等于把 calc() 的控制权交给了 Sass/Less，而不是浏览器。
- Sass 正确：
width: calc(100% - #{$gap});（$gap必须含单位，如$gap: 20px） - Less 正确：
width: calc(~"100% - @{gap}");或较新版本支持width: calc(100% - @{gap}); - 绝对不要：
calc(100% - $gap)或calc(100% - @gap)—— 编译后仍是字面量，浏览器无法识别 - CSS 自定义属性没问题：
width: calc(100% - var(--gap));，但--gap值本身必须带单位，比如--gap: 20px，不能只写--gap: 20
最容易被忽略的是：父容器高度未设时，100% 就是 0；媒体查询里根本不能用 calc()；还有小程序中 ~"" 可能被构建工具二次转义——这些都不是空格问题，但常和空格错误一起出现，排查时得一层层确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
