SCSS math.pow() 需 Dart Sass ≥1.70、禁用 @import 和 --legacy-js-api，仅支持纯数字，单位需分离后乘回，编译期执行无运行时开销，但嵌套调用影响编译性能。
SCSS math.pow() 要求启用模块系统且禁用旧式语法
直接在 @use "sass:math" 后调用 math.pow($base, $exponent) 会报错，除非你已彻底弃用 @import 并关闭 legacy-js-api。Sass 1.70+ 默认禁用旧 API，但如果你用的是 Dart Sass 旧版本或构建工具（如 Webpack sass-loader）未显式配置，math.pow 可能根本不存在——它不会 fallback 到 JavaScript 的 Math.pow，而是直接编译失败。
必须确保：
- 项目中没有
@import "sass:math"（这是过时写法，已移除） -
sassCLI 或构建工具使用的是 Dart Sass ≥ 1.70 - 配置中未启用
--legacy-js-api（Webpack 用户需检查sass-loader的implementation是否指向旧版 Node Sass）
math.pow() 只接受数字，不支持带单位的值
传入 math.pow(2px, 3) 会报错："2px" is not a number。SCSS 的 math 模块严格区分数值与带单位量，幂运算只对纯数字有意义。常见误用场景是想算缩放比例、z-index 层级指数增长、或字体大小的几何序列。
正确做法是先剥离单位再计算，最后补回：
立即学习“前端免费学习笔记（深入）”；
@use "sass:math"; <p>$base-size: 16px; $ratio: 1.25; $level: 3;</p><p>$result: math.pow($ratio, $level) * $base-size; // ✅ 先算纯数，再乘单位 // 输出：25.000000000000004px（注意浮点误差）
注意：math.pow(1.25, 3) 返回的是 1.953125，不是整数，乘以 16px 后结果带微小浮点误差。若需整像素，得套一层 math.round()。
替代方案：用 math.pow 做响应式断点指数映射比硬编码更可控
传统断点常写成 $sm: 320px; $md: 768px; $lg: 1024px;，但若希望断点按 1.33 倍递增（类似黄金比例布局），硬编码易出错且难维护。这时 math.pow 就体现出价值：
@use "sass:math";
<p>$base-breakpoint: 320px;
$multiplier: 1.33;
$breakpoints: (
"sm": $base-breakpoint,
"md": math.pow($multiplier, 1) <em> $base-breakpoint,
"lg": math.pow($multiplier, 2) </em> $base-breakpoint,
"xl": math.pow($multiplier, 3) * $base-breakpoint,
);</p><p>@each $name, $width in $breakpoints {
@media (min-width: $width) {
.breakpoint-#{$name} {
opacity: 1;
}
}
}
这种写法的好处是：改一个 $multiplier 就全局重算所有断点，避免手动计算偏差；缺点是生成的 CSS 宽度值含多位小数（如 562.789px），部分老浏览器对非整数媒体查询支持不稳定，生产环境建议用 math.round($width) 截断。
和 CSS calc() 的关键区别：math.pow 在编译期执行，不参与运行时计算
math.pow() 是 Sass 编译器在生成 CSS 前就完成的静态计算，输出的是确定数值；而 CSS 原生 calc() 是浏览器运行时解析的，无法做幂运算。这意味着：
- 你不能用
math.pow()处理 CSS 自定义属性（var(--scale)），因为它的值在编译时未知 - 无法实现“用户拖动滑块实时改变
pow结果”的交互效果——那必须用 JS +Math.pow - 但反过来，
math.pow不增加运行时开销，适合生成固定但逻辑复杂的尺寸体系（比如设计系统中的 spacing scale、font scale）
真正容易被忽略的一点：当你在 @for 循环里大量嵌套 math.pow（比如生成 20 级 z-index），Dart Sass 编译速度会明显下降——这不是 bug，是函数调用开销叠加所致。如果只是等比序列，用累乘（$val: $val * $ratio）比反复调用 math.pow 更快。
