sass 的 math 函数仅在编译期执行，不能替代 css 运行时函数；math.div() 等需注意单位保留，math.min()/max() 不等同 clamp()，math.complex() 与布局无关。
math.div() 不能直接用于 calc() 表达式里
很多人以为 math.div() 的结果能直接塞进 calc()，比如写成 width: calc(math.div(100px, 2)); —— 这会报错。Sass 在编译期计算 math.div()，生成的是纯数值（如 50px），而 calc() 是运行时浏览器解析的，两者不混用。真正要拼接 CSS 表达式，得靠字符串插值或 math.div() 配合单位保留逻辑。
实操建议：
-
math.div()只适合编译期确定尺寸，比如$gap: math.div(48px, 2);→ 编译后就是24px - 若需动态响应式比例（如
calc(100vw / 3)），必须手写calc()，math.div()完全不参与 - 单位丢失是常见坑：
math.div(100, 2)返回50（无单位），要补上px得写math.div(100px, 2)或手动乘* 1px
math.pow() 和 math.sqrt() 处理圆角与比例缩放
当设计系统需要基于基础尺寸推导圆角（如 radius = base * √2）或按比例缩放字体（font-size: pow(1.2, 3) * 1rem），math.pow() 和 math.sqrt() 就比硬编码更可靠。
注意点：
-
math.sqrt(2)返回约1.4142135624，乘以4px得5.65685px，Sass 默认保留 10 位小数，可配合math.round()截断：math.round(math.sqrt(2) * 4px, 2)→5.66px -
math.pow(1.1, 5)计算 1.1 的 5 次方，结果是纯数字，务必显式乘单位：math.pow(1.1, 5) * 1rem - 负数开方会报错：
math.sqrt(-1)→Error: Function math.sqrt() received -1, but expected a non-negative number.
math.min() / math.max() 替代 CSS clamp()？别搞混
math.min() 和 math.max() 是 Sass 编译期函数，和 CSS 的 clamp() 完全不同。前者在生成 CSS 时就定死值，后者是浏览器运行时响应式约束。
举个典型误用场景：想让字号在 1rem 到 1.5rem 间自适应，写成 font-size: math.min(1.5rem, math.max(1rem, 1.2rem)); —— 这毫无意义，因为 1.2rem 是固定值，编译后就是 1.2rem，根本没起到限制作用。
正确做法：
- 如果目标是生成一组预设尺寸（如按钮高度取
math.min($height, 48px)防止配置溢出），math.min()有用 - 如果要响应式限制（如视口宽度变化时字号平滑过渡），必须用原生
clamp(1rem, 2.5vw, 1.5rem)，Sass 数学函数无法替代 -
math.min()参数必须同单位或都无单位，math.min(10px, 1em)会报错
math.complex() 不是你要找的「复杂计算」
名字有误导性：math.complex() 是处理复数的（如 math.complex(3, 4) 返回 3 + 4i），和 CSS 尺寸计算完全无关。日常布局中几乎用不到它，99% 的场景该用的是 math.div()、math.round()、math.abs() 这类基础函数。
容易踩的坑：
- 搜 “Sass complex calculation” 误点进文档，花时间研究复数加减，结果发现和 margin、padding 毫无关系
-
math.complex()返回值无法参与长度运算，width: math.complex(100, 0) * 1px会报类型错误 - 真正需要“复杂计算”的地方（比如网格列宽按比例分配），应组合
math.div()+math.percentage()+ 单位转换，而不是找complex
复杂点在于：Sass 数学函数只解决编译期静态计算，所有依赖运行时环境（视口、字体大小、容器尺寸）的逻辑，必须交给 CSS 原生函数或 JS。这点容易被忽略，一上来就想用 math 模块包打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
