sass变量在calc()中必须用#{$var}插值，裸写$var会报错；除法乘法需用sass:math模块；嵌套calc()应改用css变量替代；clamp()中间值须拼字符串；运算符两侧须空格。
calc()里用 Sass 变量必须插值，不能裸写
直接写 $gap 进 calc() 会报错或静默失效——Sass 不会在运行时解析变量，它只在编译期处理。你得用 #{$gap} 把值“吐”进字符串里，让浏览器拿到合法 CSS 表达式。
-
$gap: 20px;→width: calc(100% - #{$gap});编译为calc(100% - 20px) - 错例：
width: calc(100% - $gap);→ Sass 会尝试把$gap当作运算符或无效标识符，大概率报错或输出残缺 CSS - 单位必须随变量一起带进去：
$gap: 20;（无单位）再拼#{$gap}px，比硬编码更易维护
涉及除法、乘法时，优先用 sass:math 模块
Sass 3.5+ 之后，/ 在某些上下文（比如 font: 16px/1.5）会被当作分隔符而非除法运算符，直接写 100% / 3 很可能不计算，甚至编译失败。
- 必须加
@use "sass:math"，然后用math.div(100%, 3)或math.mul($base, 1.2) -
math.div(100px, 3)返回33.3333333333px，单位保留；math.div(100, 3)返回纯数字，需手动补单位 - 避免
(100% / 3)这种括号写法——它在旧版 Sass 中仍不可靠，不是所有场景都触发数学运算
嵌套 calc() 是兼容性雷区，用中间 CSS 变量替代
像 calc(calc(100% - var(--gap)) / 3) 这种写法，在 Safari 15.4 之前完全不支持，安卓 WebView 也常丢弃整条规则，且 DevTools 不报错，只悄悄失效。
- 正确做法：把中间结果提前定义为 CSS 自定义属性
:root { --content-width: calc(100% - var(--gap)); }.item { width: calc(var(--content-width) / 3); } - 别指望 Sass 能“绕过”这个限制——它编译出来还是嵌套
calc()，问题照旧 - 如果必须降级到 IE，就得靠 PostCSS：先
postcss-custom-properties替换var()，再postcss-calc（设preserve: false）展开，顺序不能错
clamp() 中间值不能写 Sass 表达式，必须拼成字符串
clamp(14px, $base * 1.5vw, 20px) 会直接编译失败——clamp() 是纯 CSS 函数，Sass 变量和运算符进不去。
- 中间值得用
calc()字符串拼：clamp(14px, calc(#{$min} + #{$scale} * 1vw), 20px) - 运算符两侧必须有空格：
calc(#{$min}+#{$scale} * 1vw)→calc(14px+1.5vw)→ 浏览器忽略整条规则 - 单位混用（如
1rem + 20px）在 IE11 和部分 WebView 中也会整条丢弃，建议统一用px或提前转换单位
真正容易被忽略的是：Sass 不管单位是否合理，它只管拼字符串；而浏览器对 calc() 的容错极低——一个空格缺失、一个单位错位、一层多余嵌套，样式就没了，还不会在控制台提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
