math.pow()只接受纯数字，单位需先剥离再补回；传入带单位值如1rem会报错，正确写法是math.pow($ratio, $level) * $base-size，并用math.round()处理浮点误差。
math.pow() 只接受纯数字，单位必须手动剥离再补回
想用 math.pow() 计算字号缩放（比如 1rem × φ²）却直接传 1rem？会报错 “1rem is not a number”。Sass 的 math 模块严格区分数值与带单位量，幂运算只对无单位数有意义。
- 正确做法：先提取数值，算完再乘单位 ——
math.pow($ratio, $level) * $base-size - 注意浮点误差：
math.pow(1.25, 3) * 16px得到的是25.000000000000004px，需套math.round()截断 - 别写
math.pow(2px, 3)或math.pow($size, 2)（当$size是16px时），编译直接失败
除法必须用 math.div()，/ 运算符在多数上下文已失效
width: 100% / 3 在 Dart Sass 中大概率不计算，而是原样输出为 width: 100% / 3，或报 “Invalid CSS” —— 因为 / 在属性值中被解析为分隔符而非运算符。
- 唯一可靠写法是
math.div(100%, 3)，返回33.3333333333% -
math.div(10px, 2)→5px，单位自动保留；但math.div(1rem, 16px)会报错 “Incompatible units”，单位不自动转换 - 嵌套或循环里重复调用
math.div($a, $b)？提前存成变量，避免编译膨胀
单位混算必须显式统一，sass:math 不做隐式转换
1rem + 16px、math.max(1rem, 16px) 看似合理，实际会触发 “Incompatible units rem and px”。模块本身不替你决定 1rem = ?px，也不提供运行时换算。
- 推荐策略：基础变量全程用同一单位定义（如全用
px或全用rem），从源头规避冲突 - 真要转换？Dart Sass ≥1.70 提供
math.convert-length()，但需你明确传入基准（如math.convert-length(1rem, px, 16)表示按 1rem = 16px 换算） -
math.max(1rem, 16px)虽然能编译（因比较逻辑允许混合单位），但结果依赖于内部归一化规则，行为不易预测，慎用
响应式几何序列必须在编译期完成，calc() 完全不支持幂运算
试图在 CSS 里写 font-size: calc(1rem * pow(1.618, 2))？浏览器不认识 pow()，语法直接无效。所有指数、根号、复杂比例逻辑只能靠 Sass 在构建时算好。
-
math.pow($phi, $n)和math.sqrt($x)都是编译期求值，无运行时开销，但也不能响应 CSS 自定义属性变化 - 绑定媒体查询时，断点值仍需预设；
@media (min-width: #{math.to-string($breakpoint)})是常见模式 - 精度差异要留心：
math.div(1, $phi)和math.pow($phi, -1)返回小数位数不同，长期叠加可能偏移
真正麻烦的不是函数怎么调用，而是单位一致性必须在设计系统层就定死——sass:math 只执行指令，不代你做设计决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
