calc($size - 10px)报错是因为sass编译器将未插值的$size误判为函数名，触发“undefined function”错误；正确写法是width: calc(#{$size} - 10px)，且变量必须带单位（如$size: 24px）。
calc() 里直接写 $var 会编译失败或输出非法 CSS，根本原因是 Sass 编译器把未插值的变量当作了函数调用或无效标识符，而不是留给浏览器运行时计算。
为什么 calc($size - 10px) 会报 SassError: Undefined function
Sass 看到 calc($size - 10px) 时，会尝试解析 $size 为一个函数名（类似 calc(map-get(...))），而它并不存在。这不是浏览器报错，是编译阶段就卡住。Dart Sass 明确要求：所有 SCSS 变量必须显式插值，才能“逃逸”出 Sass 解析上下文，变成纯 CSS 字符串。
- 错例：
width: calc($gap - 12px);→ 编译失败或静默输出width: calc(88%);（错误推导） - 对例：
width: calc(#{$gap} - 12px);→ 编译为width: calc(24px - 12px); - 变量必须带单位：
$gap: 24px;，不能是$gap: 24;，否则插值后是calc(24 - 12px)，浏览器直接忽略整条规则
calc() 中的 / 为什么有时算出数字、有时被当分隔符？
Sass 对 / 的处理不看上下文，只按语法优先级硬判：只要左右都是数值（含带单位数），它就当作除法运算符，强行计算——哪怕你本意是写 font: 16px/24px 或 grid-gap: 12px/16px。
-
font-size: $base / 2;→ Sass 算出8px，输出font-size: 8px; -
line-height: #{$base} / #{$height};→ 插值后拼成line-height: 16px / 24px;，合法 - 涉及数学运算（如
100% / 3）必须用sass:math：math.div(100%, 3)，避免歧义
空格、单位、父容器高度这三者漏一个，#{$var} 就白搭
插值只是让变量“出来”，不保证“能算”。浏览器对 calc() 的容错率极低，任一硬伤都会导致整条声明被静默丢弃：
-
calc(100%-#{$gap})缺空格 →100%-24px被识别为非法 token，规则失效 -
calc(0 + 100vh)中的0没单位 → 浏览器无法推断量纲，整条作废；必须写0px或0vh -
height: calc(100% - 60px)的父容器height: auto→ 百分比基准为 0，结果恒为负值，浏览器跳过
真正容易被忽略的是：你检查了 #{$gap}，也看到了编译后的 CSS，但没打开 DevTools 的 Computed 面板确认最终生效的值——那里面藏着空格是否完整、单位是否匹配、父级尺寸是否真实存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
