如何在CSS中使用sass:math替代旧除法-css教程-PHP中文网

旧版 Sass 除法语法被废弃是因为 / 在 Sass 3.6+ 中仅在 CSS 值中保留除法含义，直接写 100px / 2 不计算而原样输出，为兼容 CSS 做妥协但导致旧代码静默失效；必须改用 sass:math.div() 显式计算，且需注意作用域、单位一致性、精度控制及迁移排查。

如何在css中使用sass:math替代旧除法

旧版 Sass 除法语法为什么被废弃

在 Sass 3.6+ 中，/ 不再默认作为除法运算符——它只在特定上下文中（如 CSS 值中）保留原意，比如 font: 16px/1.5。直接写 100px / 2 会原样输出 100px / 2，不计算，也不报错，但结果不是你想要的数值。这是为了兼容 CSS 原生语法做的妥协，但代价是旧代码静默失效。

必须用 `sass:math.div()` 替代所有显式除法

新版必须显式调用函数完成数值计算。注意：仅限数值型操作数，单位必须一致或可转换（如 px 和 rem 不能直接除），否则编译报错 "Cannot divide 100px by 2rem"。

sass:math.div(100, 2) → 50
sass:math.div(100px, 2) → 50px
sass:math.div(100px, 2px) → 50（无量纲）
错误写法：100px / 2（输出字面量，不计算）

混合（mixin）和函数里容易漏掉 `sass:math` 导入

即使你在顶层文件用了 @use "sass:math"，它也不会自动作用于 @include 或自定义函数内部。每个需要除法的 @mixin 或 @function 文件都得单独导入。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

在 mixin 文件顶部加：@use "sass:math";
不能依赖父文件导入，Sass 模块作用域严格隔离
常见坑：@function grid-column-width($columns) { @return 100% / $columns; } → 必须改成 @return math.div(100%, $columns);

除法结果精度和单位继承要手动控制

sass:math.div() 默认保留浮点精度，但不会自动四舍五入，也不会帮你补单位。比如 math.div(1, 3) 得到 0.3333333333...，直接用于 width 可能触发浏览器渲染抖动；math.div(100px, 3) 返回 33.3333333333px，而你可能想要 33.33px。

用 math.round() 或 math.precision() 控制小数位：math.round(math.div(100px, 3), 2)
单位丢失时需显式补上：math.div(100, 3) + "rem" 是错的（字符串拼接），应改用 math.div(100rem, 3)
百分比除法要注意： math.div(100%, 12) → 8.33333%，但 math.div(100, 12) + "%" 会出错（类型不匹配）