scss 5.0+ 中 / 不再默认作除法运算符，需用 math.div() 或括号强制解析；须确认 dart sass ≥1.33.0 并正确引入 sass:math；css 值中的 / 仍保留原义，不可误替换。
为什么 / 在 SCSS 中突然不工作了？
SCSS 从 4.0 升级到 5.0+ 后，/ 不再默认作为除法运算符——它只在特定上下文中（如 CSS 值中）保留原义，比如 font: 16px/1.5。其他地方直接写 $a / $b 会报错：Invalid CSS after "...": expected expression 或被当成分隔符忽略。这不是 bug，是设计变更：避免样式层与计算逻辑混淆。
真正要算除法，必须显式调用函数或加括号强制解析。
用 math.div() 替换前必须确认两件事
SCSS 4.0+ 引入了 math 模块，但不是所有环境默认启用。如果你的构建工具（如 Dart Sass CLI、Vite、Webpack + sass-loader）用的是较新版本（Dart Sass ≥ 1.33.0），math.div() 可直接用；旧版或 LibSass（已废弃）根本不支持该函数。
- 运行
sass --version，确认输出含Dart Sass且版本 ≥ 1.33.0 - 确保没在
@use "sass:math"前重复@import其他 math 相关文件（会冲突） - 若项目仍用 Webpack +
sass-loader，检查其依赖的sass是否为 Dart Sass（而非 node-sass）
math.div($a, $b) 和括号写法的实际区别
表面上，math.div(100px, 2) 和 (100px / 2) 都能得出 50px，但行为差异关键在类型推导和单位处理：
-
math.div()严格按数值逻辑运算，单位仅作附属传递；(100px / 2)是“受保护的除法”，Sass 会尝试保留单位并做类型校验 - 当操作数含不同单位（如
math.div(100px, 2em)），math.div报错：Incompatible units px and em；而(100px / 2em)也报错，但提示更模糊 - 对纯数字，
math.div(1, 3)返回0.33333（无精度控制），而math.div(1, 3, $precision: 5)可指定小数位（仅 Dart Sass ≥ 1.70.0 支持）
推荐统一用 math.div()：语义明确、错误信息友好、未来兼容性好。
批量替换时最常漏掉的三种情况
全局搜索替换 / 很危险，以下场景不能直接套 math.div()：
- CSS 属性值中的斜杠不是运算，如
line-height: 1.6、background: url(img.png) no-repeat / cover—— 这些/必须保留原样 - 带单位混合运算，如
$width / 2 + 10px，不能拆成math.div($width, 2) + 10px（语法合法但易读性差），建议改写为($width / 2) + 10px（括号触发受保护除法） - 变量声明里隐式除法，如
$ratio: 16 / 9，必须改为$ratio: math.div(16, 9)，否则编译失败
真正麻烦的从来不是函数怎么写，而是你得先分辨出哪条斜杠是“真除法”——这需要结合上下文看变量类型、单位、是否出现在声明值位置。别信正则一键替换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
