css的calc()不支持字符串拼接，+仅表示加法；必须确保变量带单位、运算符两侧有空格，且预处理器插值需显式处理单位。
calc() 里不能用加号拼字符串
CSS 没有字符串拼接能力，+ 在 calc() 中只表示加法运算，不是连接符。写 width: "100% - " + var(--gap) 会直接被浏览器当作语法错误丢弃——它甚至不会尝试解析，整条声明静默失效。
真正能“拼”的只有预处理器（Sass/Less）或 JavaScript：
- Sass 中
calc(100% - #{$gap})是编译时插值，输出的是纯 CSS 字符串，比如calc(100% - 20px) - JS 中
el.style.width = `calc(100% - ${gap})`是运行时模板拼接，但gap必须已含单位（如"20px"），否则生成calc(100% - 20)依然非法 - 纯 CSS 层面，唯一合法的“组合”方式就是
calc()内部运算，例如calc(100% - var(--gap))，前提是--gap值本身带单位
var(--x) 没单位，calc 就拒绝计算
var(--x) 返回的是原始声明值字符串。如果定义是 --x: 20，那它展开就是 20，没有单位；calc(100% - var(--x)) 实际变成 calc(100% - 20)，浏览器无法判断这是 20px 还是 20%，直接丢弃整条规则。
常见失效场景：
-
--gap: 0→calc(var(--gap) + 10px)失效（必须写成--gap: 0px） -
--size: 2→font-size: calc(var(--size) * 1rem)可行（乘法允许裸数字升格） -
--offset: 50→left: calc(var(--offset) + 10px)失效（加法要求量纲一致，50无类型）
空格缺失会让整个 calc() 被跳过
+ 和 - 在 calc() 中是歧义符号：没空格时，浏览器优先按“负号+单位”解析。比如 calc(100%-20px) 被拆成 100% 和 -20px，而 -20px 不是合法单位，整条声明被忽略。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
必须严格遵守空格规则：
-
calc(100% - 20px)✅ 正确（减号两侧都有空格） -
calc(100% + -20px)✅ 允许负值，但+后仍需空格 -
calc(100vh-30px)❌ 失效（-紧贴数值） -
calc(100%*0.8)虽然规范允许，但统一加空格更安全：calc(100% * 0.8)
预处理器变量不插值，calc 就收不到值
Sass/Less 的变量和 CSS var() 生命周期完全不同。写 calc(100% - $gap) 不会把 $gap 值塞进 calc()，而是让 Sass 自己尝试计算——可能输出 calc(80%) 这种非法值，或者原样保留字面量被浏览器拒收。
正确做法是显式插值并确保单位完整：
- Sass：
width: calc(100% - #{$gap});，且$gap: 20px（不能是20） - Less：
width: calc(~"100% - @{gap}");，用~""强制转义，防预处理器误算 - 绝对不要混用：
calc(100% - #{$gap} + var(--offset))中，Sass 只处理$gap，后面var()是纯 CSS，空格和单位仍要各自合规
真正容易被忽略的是：你以为在“拼接”，其实是在编译期（Sass）、运行时（CSS）、脚本层（JS）之间频繁切换上下文——每个环节对空格、单位、括号、转义的要求都独立成立，漏掉任意一环，链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
