优先用 math.div() 编译时计算，需运行时动态值则用 calc()；注意 / 运算符歧义、单位兼容性及 Dart Sass 环境要求，避免在循环中重复调用高阶 math 函数。
用 calc() 还是 math.div()？先分清运行时机
浏览器原生 calc() 是运行时计算，Sass 的 math.div()、math.pow() 等是编译时求值——这意味着后者不能依赖 CSS 自定义属性或元素尺寸，但能提前暴露数值错误。
常见错误现象：math.div(100%, 3) 报错 “Invalid CSS after ‘math.div’: expected expression”；这是因为 Sass 3.3+ 才内置 math 模块，旧项目没引入或没启插件。
- 使用前必须在
_sass配置中启用@use "sass:math" -
math.div(100, 3)返回33.3333333333（纯数字），而math.div(100px, 3)返回33.3333333333px，单位必须显式携带 - 若需响应式动态除法（比如基于
--col-count变量），只能用原生calc()，Sass 无解
map.get() + math.* 处理断点与比例映射
当布局依赖多组断点和不同缩放系数（如移动端字体按 0.85 倍缩放，间距按 0.75 倍），硬写数值易出错。用 map 存配置，再用 math 计算，比重复手算更可靠。
示例场景：生成一组 font-size 工具类，从 sm 到 xl，每个级别基于基础值乘以幂次增长系数：
立即学习“前端免费学习笔记（深入）”；
@use "sass:math";
$base-font: 16px;
$scale: 1.125;
$steps: ("sm": math.pow($scale, -2), "md": math.pow($scale, 0), "lg": math.pow($scale, 2));
<p>@each $key, $ratio in $steps {
.text-#{$key} {
font-size: math.mul($base-font, $ratio);
}
}-
math.pow()支持小数指数，但math.sqrt()更安全——math.pow(4, 0.5)和math.sqrt(4)结果一致，后者不易写错 - Map 键名不能含空格或特殊符号，否则
map.get()查不到；建议统一用短横线命名 - 别在
@for循环里反复调用math.div($a, $b)做相同运算，提取成变量复用，避免编译膨胀
除法陷阱：/ 在 Sass 中不是总等于除法
Sass 旧语法里，/ 在某些上下文中会被当作分隔符（比如 10px/20px 解析为两个值），而非数学运算符——这是最常踩的坑，尤其从 CSS 直接复制表达式过来时。
错误现象：width: 100% / 3; 编译后仍是 width: 100% / 3;，没变成 33.333333%；或者报错 “Invalid CSS”。
- 必须用括号包裹：
width: (100% / 3);或改用math.div(100%, 3) - 涉及单位混合时（如
px / em），Sass 不允许，会直接报错；确保单位兼容或先转为无单位数 - LibSass（旧版）不支持
math模块，若 CI 构建失败，检查是否用了 Dart Sass
性能敏感场景：避免在循环里做高阶函数调用
像 math.log()、math.sin() 这类函数虽可用，但在生成大量工具类（如 20+ 个间距层级）时，会显著拖慢编译速度，且多数布局根本不需要浮点精度到小数点后 10 位。
- 优先用
math.div()、math.mul()这类轻量函数；高阶函数只在真正需要（如动画缓动曲线生成）时用 - 如果只是等比缩放，用
$val * $ratio比math.mul($val, $ratio)更快（Dart Sass 内部优化过基础运算符） - 调试时加
@debug math.round(math.div(100, 3) * 100) / 100;看中间值，比靠猜靠谱
复杂计算逻辑真正难的不是函数怎么写，而是想清楚哪些该交给编译时，哪些必须留到运行时——混用时边界一旦模糊，就容易出现“看起来对、跑起来错”的数值漂移。
