scss运算在编译期完成，不支持运行时计算；单位必须一致才能运算，混合单位报错；响应式换算宜用封装函数；涉及css变量或动态场景必须用calc()。
SCSS 本身不执行运行时计算，所有算术运算都在编译期完成。所谓“动态”，其实是靠变量 + 运算符 + 条件逻辑，在构建阶段生成不同 CSS 规则——真正在浏览器里“动”的，还得靠 calc() 或 CSS 自定义属性。
SCSS 中加减乘除运算符的单位处理规则
SCSS 对单位极其严格：相同单位才能直接运算，混合单位（如 20px + 5%）会报错，这不是 bug，是强制你明确设计意图。
- ✅ 合法：
20px + 10px、100px * 2、math.div(40px, 2) - ❌ 报错：
20px + 5%、1rem - 2px（单位不兼容） - ⚠️ 旧版 Sass 里
$gap / 2可能被误解析为 CSS 除法符号，建议显式用math.div($gap, 2)（Sass ≥1.3）或括号包裹：($gap / 2)
响应式布局中 px/vw/vh 的安全换算方式
想把设计稿像素值（比如 375px 宽）转成视口单位？别手写 100vw / 375 * 20 这种易错表达式。
- 用函数封装更可靠：
@function px-to-vw($px, $base: 375px) { @return ($px / $base) * 100vw; } .header { width: px-to-vw(375px); } // → width: 100vw; - 注意：
100vw在 iOS Safari 中可能包含滚动条宽度，若需精确占满可视区，考虑用100dvw（需检查目标环境支持） - 避免在 Sass 层做 rem 换算（如
14px / 16px * 1rem），尤其项目已接入postcss-pxtorem——双重转换会导致字号偏差
何时必须用 calc()，而不是 Sass 运算
只要涉及 CSS 变量、用户缩放、滚动状态或 viewport 变化，Sass 编译期算出来的静态值就失效了，此时只能靠浏览器运行时计算。
- ✅ 必须用
calc()：height: calc(100vh - var(--header-height) - 60px)（--header-height可能由 JS 动态设置） - ✅ 必须用
calc()：left: calc((100% - var(--card-width)) / 2)（卡片宽度随屏幕变化） - ❌ 不要用 Sass 替代：
width: #{$card-width / 2}—— 这只会输出一个固定值，无法响应容器尺寸变化 - 小技巧：Sass 可以帮你生成带
calc()的规则，比如插值：margin: calc(#{math.div($gap, 2)} - 1px)，但核心逻辑仍由浏览器执行
最常被忽略的一点：Sass 运算结果是纯 CSS 值，它不会感知 DOM 结构或用户行为；而真正“动态”的布局，永远需要 calc()、clamp() 或 JS 配合。别指望一个 @for 循环或 math.div() 调用就能替代运行时逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
