sass变量不能直接用于calc()，需在sass层先计算再插入；注意单位统一、空格规范、避免嵌套calc()；旧版safari不支持嵌套，单位混用可能导致兼容性问题。
calc() 里不能直接用 Sass 变量
浏览器解析 calc() 是在 CSS 运行时，而 Sass 变量是在编译期就替换成值的。所以写 calc($spacing * 2) 会报错——Sass 根本不认这种语法，它只允许在纯 Sass 表达式里做运算。
实操建议：
- 所有变量参与的计算，必须在 Sass 层先算好，再塞进
calc()，比如：width: calc(#{$spacing * 2} + 1rem) - 如果涉及单位混合（如
px+em），Sass 无法自动转换，得手动统一单位，否则编译失败 - 注意
$spacing必须是带单位的数值（如16px），纯数字（如16）参与乘法后不会自动补单位，容易漏写导致样式失效
Sass 的 calc() 拼接容易引发空格错误
CSS 的 calc() 对空格敏感：加减号前后必须有空格，乘除号前后不能有空格。但 Sass 字符串拼接时很容易忽略这点，生成非法 CSS。
常见错误现象：calc(100%-20px) 浏览器直接忽略整条声明，控制台无报错，样式静默失效。
实操建议：
- 用插值拼接时，显式加上空格：
calc(#{$full} - #{$gap})→ 输出calc(100% - 20px) - 避免手写字符串拼接
"calc(" + $a + " - " + $b + ")"，易出空格遗漏，优先用插值 - 复杂表达式建议拆成变量再组合，比如先定义
$offset: #{$gap} + 4px，再写calc(#{$full} - #{$offset})
嵌套 calc() 在旧版 Safari 中不支持
像 calc(calc(100% - 20px) / 2) 这种嵌套写法，Safari 15.4 之前完全不识别，会整个丢弃该声明。
使用场景：响应式栅格中想先减边距再均分，又不想用 JS 或额外 wrapper。
实操建议：
- 优先用 Sass 层展开计算，避免嵌套：
width: calc((100% - 20px) / 2)是合法的，Safari 支持 - 如果必须动态嵌套（比如变量本身是
calc()表达式），改用 CSS 自定义属性 +calc()组合，但要注意自定义属性不能直接参与 Sass 运算 - 用
@supports (width: calc(1px))做降级，但别依赖它检测嵌套能力——@supports不区分嵌套层级
单位混用时 Sass 不报错，但运行时可能失效
比如 $base: 1rem; $offset: 20px; width: calc(#{$base} + #{$offset})，Sass 编译通过，输出 calc(1rem + 20px)，现代浏览器能算，但 IE11 和部分安卓 WebView 会直接忽略整条规则。
性能影响：单位自动换算需要浏览器实时计算，大量使用可能拖慢重排（尤其在动画中）。
实操建议：
- 同组件内保持单位一致，要么全用
rem，要么全转成px（用strip-unit()函数配合根字体大小换算） - 用
@warn检查单位：@if unit($offset) != unit($base) { @warn "Unit mismatch in calc()"; } - 对关键布局（如弹窗宽度、表单控件高度），宁可多一层 wrapper 或 JS 计算，也不赌跨端单位兼容性
最麻烦的不是怎么写对，而是改完一处，其他地方因为单位/空格/嵌套深度不一致，悄悄坏掉——尤其当多个开发者共用同一套变量时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
