box-sizing 用错导致尺寸混乱，全局设 border-box 最省事；calc() 用于运行时动态计算，math.div() 用于编译期静态除法。
box-sizing 用错导致 padding/margin 计算混乱
直接改 box-sizing 是最省事的解法，不是所有场景都得靠 Sass 算。默认 content-box 下，width: 200px + padding: 20px 实际占宽 240px，容易和设计稿对不上。改成 border-box 后，padding 和 border 都挤在 width 里，数值更直观。
常见错误：只在局部元素设 box-sizing: border-box，但父容器还是 content-box，导致嵌套后尺寸漂移。建议全局重置：
*, *::before, *::after { box-sizing: border-box; }注意 Safari 旧版本对 *::before 的兼容性略差，如果要支持 iOS 9 以下，可去掉伪元素部分。
Sass 中用 calc() 还是用 math.div() 做除法
CSS 原生 calc() 是运行时计算，适合响应式场景；Sass 的 math.div()（v1.3+）是编译期计算，输出纯数值。选哪个，取决于你是否需要 CSS 变量参与运算。
立即学习“前端免费学习笔记（深入）”；
- 要用 CSS 变量动态调整？必须用
calc()，比如width: calc(var(--base-width) / 2) - 只是把
$gap: 24px平分给左右 margin？用math.div($gap, 2)更干净，输出12px，不依赖运行时 - 旧版 Sass（math.div()？别用
/直接除——它可能被解析成 CSS 除法符号，加个括号：($gap / 2)
margin/padding 混合单位计算时单位丢失问题
Sass 对单位很敏感。20px + 5% 会报错，因为不能混算。这不是 bug，是设计约束：它强制你思考“这个值到底该以什么为基准”。
典型场景：卡片内边距想随容器缩放，但又要有最小像素值。别硬凑：
- ❌ 错误写法：
padding: 20px + 5%→ 编译失败 - ✅ 替代思路：用
clamp()配合 CSS 自定义属性，Sass 只负责生成基础值：--pad-min: #{20px}; --pad-max: #{40px}; padding: clamp(var(--pad-min), 5%, var(--pad-max)); - 如果非要在 Sass 层做响应式缩放，统一转成视口单位：
padding: math.div(20px, 375px) * 100vw（假设设计稿宽度 375px）
rem 基准换算中 px 到 rem 的精度陷阱
很多人写 font-size: #{14px / 16px}rem，看似合理，但 Sass 默认保留小数位数有限，14/16 = 0.875，某些版本会截成 0.87rem，累积几层后字体就偏小。
实操建议：
- 显式控制精度：
font-size: round(14px / 16px * 1000) / 1000rem，保证三位小数 - 更稳的方式：定义变量
$rem-base: 16px，然后统一用math.div(14px, $rem-base) - 注意：若项目用了 postcss-pxtorem，Sass 层就别转 rem，留到构建时自动处理，避免双重转换
复杂点在于，单位转换不是纯数学问题，它牵扯到渲染引擎如何解释小数 rem、浏览器对 subpixel 渲染的支持差异，以及设计系统里「视觉一致性」和「代码可维护性」之间的权衡——这些没法靠一个函数解决，得看上下文。
