math.div是sass 4.0+中替代/除法运算符的唯一安全函数，因/在非font/grid等特定css属性中会报错“invalid css”，必须用@use 'sass:math'引入并调用math.div($a, $b)，参数需同单位且为数值类型。
math.div 不是“解决错误”的银弹，它只是 Sass 4.0+ 中引入的、用于替代传统除法运算符 / 的安全函数——因为直接写 10px / 2 在新版 Sass 中会报错（Invalid CSS after "10px": expected expression），而你真正要处理的，是“如何让除法在编译时不崩、结果不意外”。
为什么 / 会报错？
Sass 4.0 起，/ 在 CSS 层面被严格限制：仅允许出现在 font、grid、background 等少数属性值中（如 font: 12px/1.5 sans-serif），其他位置一律视为语法错误。这不是 bug，是设计变更——避免歧义和 CSS 兼容性问题。
常见错误现象：
- 写
$size: 100px / 4;→ 编译失败，提示Invalid CSS after "100px" - 写
width: $container-width / 2;→ 同样报错，哪怕变量已定义 - 误以为加括号就能绕过：
(100px / 4)无效，括号不改变运算符解析规则
什么时候必须用 math.div？
所有需要数值或带单位量做除法、且结果要参与后续计算的场景——尤其是变量赋值、函数返回、mixin 参数计算。
使用示例：
@use 'sass:math';
$base: 16px;
$half: math.div($base, 2); // ✅ 得到 8px
$scale: math.div(100%, 3); // ✅ 得到 33.33333%
.container {
font-size: $half;
width: $scale;
}
注意点：
- 两个参数都必须是数字类型（
number），不能是字符串或null - 单位会自动保留并参与运算：
math.div(100px, 2)→50px，math.div(1rem, 2)→0.5rem - 不支持混合单位：
math.div(100px, 1rem)会报错（单位不匹配）
math.div 和传统写法的兼容性陷阱
如果你的项目还在用 Dart Sass 3.x 或 LibSass（已废弃），math.div 根本不存在——它只在 Dart Sass ≥4.0.0 中可用。强行使用会提示 Function math.div is not found。
应对建议：
- 检查版本：
sass --version，确保输出类似4.1.0或更高 - 旧项目升级前，先全局搜索
/运算，尤其注意 mixin 内部、循环里动态计算的位置 - 别混用：
math.div(10, 2) + px是错的（结果已是5px），重复加单位会导致5pxpx - 除零不会抛错，但返回
Infinity，CSS 中无效，需自行 guard：@if $denominator != 0 { ... }
最常被忽略的其实是单位隐式转换——比如想把 1.5rem 除以 16 换算成 em 基准，得先用 math.div(1.5rem, 1rem) 得到纯数字 1.5，再除；直接 math.div(1.5rem, 16) 结果是 0.09375rem，不是你要的无单位比值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
