scss中calc()变量未插值会导致sass编译期错误计算或静默丢弃，必须用#{$gap}显式插值并确保单位、空格及父容器高度合法。
calc()里变量没插值，Sass直接算掉了
SCSS看到calc(100% - $gap)会尝试在编译期执行减法——但它根本不管$gap是不是带单位的值。比如$gap: 20px，Sass可能强行把100% - 20px转成80%（单位被抹掉），生成非法CSS；更糟的是某些版本直接静默跳过整条声明。
必须写成calc(100% - #{$gap})，让Sass原样输出calc(100% - 20px)，把运算留给浏览器。
- 插值不是“加个花括号就完事”，而是明确告诉Sass：“这里别算，吐出去”
- 如果
$gap来自map-get($spacings, md)，先确认它返回的是20px这种带单位的值，否则手动补：#{$val}px - 绝对不要在
#{}外做复合运算：calc(100vh - $header - $footer)❌，应提前合并：$offset: #{$header + $footer}; calc(100vh - #{$offset})✅
/斜杠被Sass当成除法，不是分隔符
写font: $font-size / $line-height，Sass会真去算16px / 24，结果是0.6666666667px——你本意是16px/24px这种字体行高语法。
/在Sass里永远优先当运算符处理，它不会根据上下文自动识别你是想写calc还是font。
- 字体行高必须写成：
font: #{$font-size}/#{$line-height} - grid gap那种双值表达式（如
gap: 8px/16px）也得用插值拼接：gap: #{$col-gap}/#{$row-gap} - 别指望Sass能智能判断——它只认语法，不认语义
插值后空格、单位、父容器高度不配合，照样失效
用了#{$gap}不代表万事大吉。浏览器解析calc()极其严格，三处细节一错全崩：
- 运算符两侧必须有空格：
calc(100%-20px)❌ → 浏览器直接忽略整条声明；必须是calc(100% - 20px)✅ -
0必须带单位：calc(0px + 100vh)✅，calc(0 + 100vh)❌（整个声明失效） - 父容器高度为
auto时，子元素写height: calc(100% - 60px)→ 百分比基准是0，结果恒为负值，浏览器丢弃 -
$gap定义时没单位（如$gap: 20）→ 输出calc(100vh - 20)，非法；定义就得带单位：$gap: 20px
插值位置错了，反而引发新错误
插值不是万能胶，塞错地方会触发Sass语法报错或产出无效CSS：
- 不能用在选择器开头：
#{$prefix}-item❌（缺少点号，不是合法类名）；必须写成.#{$prefix}-item✅ - 不能用在
var()默认值位置：color: var(--text, $fallback)❌ → Sass不识别var()内参数为变量上下文，会原样输出或报错；可行但削弱动态性：color: var(--text, #{$fallback}) - 插值里括号不配对：
#{drop-shadow(0 2px 4px rgba(0,0,0,0.1)}❌（少一个右括号）→ Sass中断编译 - 末尾多空格：
--color: #{$c} ;（分号前有空格）→ 某些旧版构建工具会吞掉空格连同分号，导致属性值截断
真正麻烦的不是#{} 本身，而是误以为它能绕过CSS运行时规则——它只解决“值能不能出来”，不解决“出来后浏览器认不认”。calc()失效时，先搜源码里有没有#{$，再检查编译后CSS里空格和单位是否完整，最后往上翻三层父容器的高度设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
