math.div()是dart sass中替代/除法的唯一可靠方式，因/在sass 3.4+中仅当左右均为纯数字或同单位时才执行除法，否则易解析失败或静默失效；math.div()行为确定，但需@use导入、不支持跨单位或css变量运算。
math.div() 是 Dart Sass 中替代斜杠 / 除法的唯一可靠方式，尤其在涉及百分比、单位混合或需要编译期精确结果时。旧写法如 100% / 3 在 Sass 3.4+ 中已不可靠，不是总触发计算，还常报错。
为什么 / 不再安全？
Sass 3.4+ 默认把 / 当作运算符，但只在左右都是纯数字（或同单位数值）时才执行除法；否则它会尝试解析却失败。常见翻车现场：
-
font: 12px/24px sans-serif→ 报SassError: Invalid CSS after "px/24px": expected expression -
width: 100% / 3→ 编译后原样输出，没变成33.33333% -
margin: 1rem / 2→ 若1rem来自变量且未显式带单位，可能静默失效
math.div() 的正确用法和限制
必须显式 @use "sass:math"，且仅 Dart Sass 支持（LibSass 已淘汰）。关键规则：
- 单位必须显式携带：
math.div(100px, 3)返回33.33333px，math.div(100, 3)返回纯数字33.33333 - 不支持跨单位运算：
math.div(16px, 1rem)直接报错，需先统一为无单位数，如math.div(16px / 16px, 3) - 不能依赖 CSS 变量：
math.div(var(--col-count), 2)语法错误，math.*全是编译期行为
如何避免精度污染和小数位失控
math.div() 默认保留约 10 位小数，但浏览器最终只取 sub-pixel 级别，多余位数只会干扰调试和视觉一致性。
- 强制截断用
round()：#{round(math.div(14px, 16px), 3)}rem→0.875rem - 别对带单位值直接
round：round(14px / 16px, 3)rem是错的，单位参与运算易出错 - 百分比场景慎用
percentage()：percentage(1/3)输出33.3333333333%，三个加起来不到 100%，应改用calc(#{$a} / #{$total} * 100%)
什么情况下坚决不能用 math.div()
当计算依赖运行时信息时，math.div() 完全失效，必须交由浏览器：
- 响应式列宽基于
var(--col-count)：只能写width: calc(100% / var(--col-count)) - 视口单位参与运算：
math.div(100vw, 12)非法，vw不能在编译期求值 - 与
min()/max()混用不同单位：min(math.div(100%, 3), 200px)会触发 Sass 自己的min()函数，而非 CSS 原生函数，单位冲突必报错
真正难的不是选 math.div() 还是 /，而是从第一行变量定义起就分清：这个值是否会在构建后被用户环境改变。一旦模糊，后面所有计算都会在某个构建环节悄悄失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
