Dart Sass 数学函数完全指南：解决SCSS除法运算与math.div()报错问题
SCSS中math.div()报错“不是函数”的解决方案
升级到Dart Sass 1.33及以上版本后，许多开发者会遇到一个常见问题：传统的除法表达式如100px / 2仍能正常编译，但使用math.div(100px, 2)时却提示“Function ‘math.div’ not found”错误。这并非安装配置问题，而是Dart Sass从1.33版本开始的重要架构调整：默认不再加载全局数学函数库，新的数学模块必须显式导入且不会自动暴露到全局作用域。
要彻底解决这个SCSS数学函数报错问题，请按以下步骤操作：
- 在使用任何数学运算前，必须通过
@use "sass:math"语句导入数学模块（注意：必须使用@use而非已废弃的@import指令）。 - 调用函数时必须包含完整的命名空间前缀，即必须写成
math.div($a, $b)格式，不能省略math.前缀。 - 对于多文件项目，最佳实践是在主SCSS入口文件（如
_index.scss）中统一导入并设置别名：@use "sass:math" as math，这样所有通过@use引用该文件的子模块都能共享这个数学命名空间。
math.div()函数与除法运算符/的深度对比
这两个看似相似的除法实现方式有着本质区别，错误选择可能导致单位处理异常甚至编译失败。
- 除法运算符
/是编译期运算符，遵循Sass复杂的“除法上下文”规则。当左侧不是纯数字或右侧不是无单位数值时，它可能被解释为CSS原生语法（如font: 10px/2），导致数学计算被跳过或直接编译错误。 math.div($a, $b)是行为明确的专用函数，其唯一功能就是执行数值除法。它会自动保留被除数的单位（如math.div(100px, 2)返回50px），并支持任意单位的数值相除（如math.div(100px, 2em)返回无量纲结果）。- 安全使用建议：只要涉及变量运算，一律使用
math.div()函数；仅在处理明确字面量且上下文清晰时（如定义line-height: 1.5）才考虑使用/运算符。
解决math.round()四舍五入精度问题
当发现四舍五入结果不稳定时，这通常是浮点数精度与单位转换共同作用的现象。Dart Sass的math.round()函数接收的是纯数值参数，不直接处理单位。当传入带单位的值（如3.75px）时，函数内部会执行“剥离单位→计算→重新附加单位”的过程，这个转换链可能引入微小的浮点误差。
立即学习“前端免费学习笔记（深入）”；
- 典型表现：
math.round(10.499999999999998px)有时返回10px，有时却得到11px，这取决于底层IEEE 754浮点数的具体存储方式。 - 精度优化方案：对于高精度要求的场景，可先用
math.floor()或math.ceil()进行预处理，或手动计算容差：math.abs($x - round($x))。 - 最佳实践：关键布局尺寸（如栅格系统列宽）应避免依赖
math.round()做最终决策。建议采用整数比例设计，或使用clamp()函数配合固定步长值确保稳定性。
旧项目迁移：批量替换数学函数的完整流程
从旧版本Sass迁移时需特别注意：Dart Sass已完全移除divide()、round()、floor()等全局函数，它们现在统一整合在sass:math模块中，且必须使用带命名空间的形式调用，即math.div()、math.round()、math.floor()。
- 无法通过
@forward "sass:math"恢复旧函数名，必须手动修改所有调用代码。 - 批量替换推荐使用正则表达式（在VS Code或通过sed命令）：
将divide\(([^)]+)\)替换为math.div($1)
将round\(([^)]+)\)替换为math.round($1)
注意：正则替换适用于简单场景，复杂嵌套表达式替换后仍需人工校验。 - 特别提醒：
percentage()函数目前仍是全局函数，但Dart Sass 1.70+版本推荐使用math.percentage()以保持代码风格统一。
最后强调一个关键规则：@use导入语句必须置于SCSS文件顶部，且不能被任何条件语句（如@if）包裹。任何在@use之前出现的math.xxx函数调用都会直接导致编译错误，且通常没有明确警告提示。
