必须显式导入 @use 'sass:math'，因 dart sass ≥4.0 废弃 @import 且 @use 作用域不跨文件；math.div 要求参数为数值、单位兼容（如 px/em 可，px/rem 不可）；禁用于 css 原生除法上下文（如 line-height）；需手动防御除零。
math.div必须显式导入，不能省略@use
直接写 math.div(100px, 2) 会报错 Function math.div is not found——这不是函数不存在，而是没加载模块。Dart Sass ≥4.0 强制要求用 @use 'sass:math' 显式引入，@import 已废弃且不支持该函数。
常见错误：在 _variables.scss 里写了 @use 'sass:math'，但其他文件没重复写，结果调用失败。原因：@use 是模块级作用域，不会跨文件透传。
- 每个需要调用
math.div的 SCSS 文件（包括.vue单文件组件的<style></style>块）都得单独加@use 'sass:math' - 如果想全局可用，得在构建配置中通过
additionalData注入（如 Vue CLI 的sass-loader配置里 prepend@use 'sass:math';） - 别混用
@use和@import：同一项目中同时存在会导致命名冲突或静默失效
除法参数类型和单位必须匹配
math.div($a, $b) 不是“把两个值除一下”那么简单。它对参数类型、单位兼容性有硬性要求，错一个就编译失败或结果异常。
- 两个参数都必须是数值（
number类型），不能是字符串（如"100"）、null或未定义变量 - 单位可保留（
math.div(100px, 2) → 50px），但混合单位仅限“可比单位”：如math.div(100px, 2em)返回无量纲数50px/em；而math.div(100px, 2s)合法，返回50px/s - 禁止单位完全不兼容：
math.div(100px, 1rem)会报错，因 px 与 rem 属不同维度，Sass 无法自动换算 - 想做基准换算（如 1.5rem ÷ 16px 得无单位比值），得先转成同单位：
math.div(math.div(1.5rem, 1rem), 16)
别用math.div处理纯字面量CSS上下文
像 line-height: 1.5、font: 14px/1.4 sans-serif 这类 CSS 原生支持的除法上下文，/ 是合法且推荐的写法。math.div 在这里不仅多余，还可能破坏语义。
-
line-height: math.div(21, 14);编译后是line-height: 1.5;，功能等价但可读性差 -
font: 14px/math.div(1.4, 1) sans-serif;是错的——/在font声明里本就是 CSS 合法语法，强行套函数反而让代码晦涩 - 真正该用
math.div的场景是：变量参与计算（$width: math.div($container, 3)）、函数返回值（@function vw($px) { @return math.div($px, $designWidth) * 100vw; }）、mixin 参数动态推导
除零和 Infinity 要手动防御
math.div(100, 0) 不会中断编译，但返回 Infinity，最终生成的 CSS 值（如 width: Infinitypx）浏览器直接忽略，样式失效且无提示。
- 所有分母来自变量时，必须加
@if判断：@if $denominator != 0 { $result: math.div($numerator, $denominator); } - 别依赖
math.div自带校验——它不做运行时安全兜底 - 大屏适配中常见的
vw()函数，若$designWidth被意外覆盖为 0，整个页面宽度会塌缩，这种隐式失败最难排查
实际项目里最常被忽略的，是单位隐式转换和模块作用域边界。写一个通用 px-to-vw 函数时，开发者往往只关注公式，却忘了 @use 'sass:math' 必须出现在函数定义所在的文件里，而不是“以为引入过一次就全局有效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
