scss中calc()需用插值语法#{$var}避免sass提前运算，变量必须带单位，加减号前后须空格，父容器需有高度基准，否则calc静默失效。
SCSS里直接写calc(100% - $gap)会报错或失效
这不是浏览器的问题，是 Sass 编译器把$gap当成了自己的变量参与了运算——比如$gap: 20px，它可能真去算100% - 20px，结果要么报错（单位不兼容），要么输出calc(80%)这种非法值。更糟的是，某些版本会因类型不匹配直接跳过整条声明，连 warning 都没有。
必须用插值语法让 Sass 停手，原样把表达式交给浏览器运行时处理：
-
calc(100% - #{$gap})✅（$gap必须定义为带单位的值，如$gap: 20px） -
calc(100vh - #{$header-height})✅（减号两侧空格不能少） -
calc(100% - $gap)❌（没插值，Sass 自己算，大概率崩） -
calc(100% - #{$gap}px)❌（$gap已是20px，再加px变成20pxpx）
calc()在 SCSS 中的空格和单位必须手动保全
SCSS 不负责校验最终 CSS 的语法，它只管编译。你写了calc(100% - #{$gap})，但万一$gap是20（无单位），编译出来就是calc(100% - 20)，浏览器直接丢弃整条规则。
这些细节必须人工盯死：
- 所有参与
calc()的 SCSS 变量，定义时就要带单位：$header-height: 64px，不是$header-height: 64 -
calc()里的+和-前后必须有空格，插值不能破坏它：calc(100vh - #{$header-height})，不是calc(100vh-#{$header-height}) -
0必须带单位：calc(0px + 100vh)，calc(0 + 100vh)会静默失效 - 乘除要注意单位限制：
calc(var(--size) * 2)要求--size是12px这类带单位值，auto或空字符串会让整条失效
父容器高度缺失会让calc(100% - X)彻底白写
写了height: calc(100% - 60px)却没反应？大概率不是calc写错了，而是100%根本没基准。父元素height: auto或压根没设高度时，100%解析为0，结果是-60px，浏览器直接忽略该声明。
常见于 Vue/React 组件嵌套：
-
.layout没设height: 100%，子组件.content的calc(100% - 60px)就无效 - 验证方式：DevTools → Computed → 看目标元素
height是否为具体像素值；不是？就往上查三层：html → body → 直接父容器 - 更健壮的替代：
height: calc(100dvh - 60px)（避开地址栏抖动和百分比链）
Less 用户注意/和插值陷阱
Less 对/的处理比 Sass 更危险：它看到calc(100% / 2)可能真会算成calc(50%)，表面生效，逻辑已错。低版本 Less 甚至会把calc(100% - 50px)编译成calc(50%)。
安全写法只有两种：
-
width: calc(~"100% - @{gap}");（转义字符串，完全绕过 Less 运算） -
width: calc(100% - @{gap});（仅限较新版本，且@gap必须是20px） -
calc(100% / @{n})❌（/极易被提前计算，务必用转义） -
font: 14px/20px这类非calc场景的/不受影响，不用转义
真正容易被忽略的是三重叠加：SCSS 插值漏了、空格丢了、父容器又没高度——三个点里只要一个没守牢，calc就静默消失，连控制台都不会提醒你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
