Dart Sass除法弃用警告修复致应用崩溃，求解决方案

弃用警告：在calc()之外使用/进行除法运算已被弃用，将在Dart Sass 2.0.0版本中移除。试了官方给的calc()或math.div()修复方法后，Web应用直接崩了。

一、先排查calc()方案为啥崩 #

• 语法别写错：calc里的运算得加空格，单位要统一。比如别写calc(100px/2)，改成calc(100px / 2)才行。
• 变量插值得弄对：用Sass变量的话，得用插值语法。比如calc(#{$my-width} / 2)，别直接写calc($my-width / 2)，有些旧版本Sass会解析出错。
• 看看浏览器兼容：老浏览器可能不支持复杂的calc表达式，要是有问题就把计算拆成简单点的。

二、再排查math.div()方案的问题 #

• 必须导入math模块：用math.div()之前，得先加这句：

  @use 'sass:math';
  

  别用旧的@import，不然找不到这个方法，直接崩。
• 单位要手动加：math.div()返回的是纯数字，不带单位，所以得自己补上。比如别写width: math.div(100px, 2);，改成width: math.div(100, 2) * 1px;或者width: #{math.div(100, 2)}px;。
• 整数小数要注意：math.div(5,2)返回的是2.5不是2，要是需要整数结果，得配合math.floor()或者math.ceil()用。

三、实在不行换个方法：用乘法代替除法 #

要是上面俩方法都搞不定，直接用倒数乘法就行，比如除以2就乘以0.5：

width: 100px * 0.5;

这种方式兼容性拉满，不会有语法解析的坑。

四、临时救急：降级Sass版本 #

要是着急修复，先把Dart Sass降到1.x版本，就能避开这个警告，但这只是临时办法，还是得尽快适配2.0的规范。

相关截图 #

问题截图

calc()方案截图

math.div()方案截图

内容的提问来源于stack exchange，提问作者Chingun Erdene-Ochir