scss中calc()不生效主因是变量未用#{}插值包裹，导致sass编译时提前运算而非浏览器运行时计算；还需确保运算符两侧有空格、变量自带单位、父容器高度有效。
SCSS 里 calc() 不生效，90% 是因为变量没用 #{} 插值包裹，Sass 在编译阶段就把它算没了，浏览器根本见不到 calc。
为什么 calc(100% - $gap) 编译后变成 calc(80%) 或直接消失
Sass 把 $gap 当作自己的数值参与了运算，而不是留给浏览器运行时解析。比如 $gap: 20px，Sass 可能直接算出 100% - 20px = 80%（单位被强制转换），生成非法 CSS；更糟的是，某些版本会因类型不匹配静默跳过整条声明。
-
$gap: 20px必须写成calc(100% - #{$gap})，让 Sass 原样输出calc(100% - 20px) - 如果变量来自函数或 map（如
$total: map-get($spacings, md)），先确认它返回带单位的值；否则手动补：#{$val}px - 不要在
#{}外做减法：calc(100vh - $header - $footer)❌，应提前合并：$offset: #{$header + $footer}; calc(100vh - #{$offset})✅
/ 在 calc() 里被 Sass 当成除法怎么办
Sass 看到 / 会优先当作除法运算符，尤其当左右都是数字时（如 $base: 16px; calc($base / 2)），它真会算出 8px 并塞进 CSS —— 但你本意可能是想生成 font: 16px/24px 这种斜杠分隔语法。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 写字体行高：
font: #{$font-size}/#{$line-height};→ 输出font: 16px/24px; - 写 grid gap 类表达式（仅字符串拼接）：
gap: #{$col-gap}/#{$row-gap}; - 绝对不要依赖 Sass 自动识别上下文：它不会判断你写的是
calc(100% / 2)还是font: 16px/24px，/永远优先按运算符处理
空格、单位、父容器高度三者不配合，#{} 也救不了
插值只解决“变量能不能出来”，不解决“出来后能不能算对”。以下问题即使用了 #{$gap} 依然白搭：
-
calc(100%-20px)缺少空格 → 浏览器直接忽略整条声明；必须写成calc(100% - 20px) -
0出现在calc()里必须带单位：calc(0px + 100vh)✅，calc(0 + 100vh)❌（后者整个声明失效） - 父容器高度为
auto，子元素写height: calc(100% - 60px)→ 百分比基准为 0，结果恒为负值，浏览器丢弃 -
$gap是20（无单位）→ 输出calc(100vh - 20)，非法；变量定义时就要带单位：$gap: 20px
真正容易漏掉的是：插值只是第一步，后面空格、单位、布局链路一个都不能断。你看到 DevTools 里 calc() 没生效，先搜源码里有没有 #{$，再检查编译后 CSS 里空格和单位是否完整，最后往上翻三层父容器的高度设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
