警告:Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

起因

vue 项目运行的时候出现这么一个跟 scss 有关的错误 不耽误运行  但是控制台报了一堆警告

大概意思是：不推荐在calc（）之外使用/进行除法，并将在Dart Sass2.0.0中删除

问题分析

sass 将不再支持用于在功能之外进行除法，可以看下官方说明

大致翻译：如今，Sass使用复杂的启发式方法来判断a/应该被视为除法还是分隔符。即便如此，作为一个分隔符，它也只会产生一个难以在Sass中检查的未引用字符串。随着越来越多的CSS功能，如CSS网格和新的rgb（）和hsl（）语法使用/作为分隔符，这对Sass用户来说越来越痛苦。

因为Sass是一个CSS超集，所以我们通过将/重新定义为仅一个分隔符来匹配CSS的语法。/将被视为一种新型的列表分隔符，类似于今天的工作方式。除法将改为使用新的math.div（）函数编写。此函数的行为将与今天完全相同。

解决

有三种方式可以解决，前两种是警告里面给出的方法。

/*改之前*/
border-radius:$button-height / 2

方法一：sass:math

用sass:math中的math.div来进行除法

/*使用sass:math*/
@use "sass:math";
border-radius:math.div($button-height,2);

• scss文件头部引入 @use “sass:math”; 
• 把用到除法的地方换成math.div(参数1， 参数2)

方法 2 calc

/*使用calc*/
border-radius:calc($button-height / 2);

• / 号两边要有空格

方法 3 降低 sass 插件版本

我没有用 node-sass，用的是 sass。开始默认是安装最新的 sass 版本，后来降到了 sass@1.32.12 ，报错就没有了

npm uninstall sass
npm install sass@1.32.12 -D

---

记录自己的成长，也希望能帮助到大家少走弯路，期待你的点赞支持💫！