Dart SASS除法运算符/废弃警告 选sass:math还是CSS calc更合适？

两种修复方案的对比 #

1. 按官方要求改用math.div #

适合长期维护、重度依赖SASS特性的项目：

• 修改成本极低：不用逐行手改，用IDE全局正则替换就能批量搞定，步骤也很简单：先全局引入@use "sass:math";（部分构建工具支持配置SASS全局导入，不用每个文件单独加），再用正则匹配(\$[\w-]+)\s*\/\s*(\d+)，替换为math.div($1, $2)即可，改完编译校验一遍基本就能解决所有报错。
• 优势明显：math.div是编译时计算，直接输出最终数值到CSS，文件体积更小，性能比运行时计算的原生calc更好，而且完全兼容你现有所有SASS逻辑，改完之后不会再出现同类废弃警告，后续维护成本最低。

2. 替换为原生calc #

仅适合后续基本不再迭代、想弱化SASS依赖的项目：

• 改法更繁琐：所有SASS变量插入calc都需要加插值语法，比如margin-top: $gutter / 2;要改成margin-top: calc(#{$gutter} / 2);，如果是多变量运算还要注意插值位置，反而容易写错，实际修改工作量比改math.div更大。
• 存在隐性问题：calc是浏览器运行时计算，遇到复杂运算会有微小的性能损耗，而且部分极端场景下不同浏览器的计算精度可能存在差异，不如SASS编译输出固定值稳妥。

关于字号Mixin的问题 #

这个实现px、rem双单位的Mixin完全没有过时，现在很多需要兼容低端设备的项目还在使用，你只需要把里面的除法逻辑替换成math.div就能正常运行：

@use "sass:math";
@mixin font-size($font-size: 16){
  font-size : #{$font-size}px;
  font-size : #{math.div($font-size, 10)}rem;
}

如果你不需要兼容IE11及更低版本浏览器，也可以考虑用CSS原生clamp实现响应式字号，但现有Mixin的逻辑没有任何问题，不需要整体重构。

最终建议 #

优先选择改math.div的方案，批量修改10分钟就能搞定，比改calc省事得多，也不会影响现有代码逻辑，后续没有兼容隐患。

内容的提问来源于stack exchange，提问作者user1406440