SCSS中/除法运算符在Dart Sass 2.0.0起被彻底移除，因其与CSS原生分隔符语义冲突不可调和；必须统一替换为math.div()——需@use导入、参数单位一致、不支持CSS变量，而calc()内、url、content等上下文中的/仍安全。
SCSS 中的 / 除法运算符已被明确标记为弃用，不是“可能改”，而是 Dart Sass 2.0.0 起直接移除——所有未迁移的 /（在 calc() 外）都会导致编译失败。
为什么 / 必须被替换
它根本不是“语法升级”，而是语义冲突不可调和：/ 在 CSS 里是分隔符（font: 14px/1.5 sans-serif），在 Sass 里又被当运算符，解析器靠启发式规则硬猜，结果就是：
- 左边是变量、右边是数字 → 可能算出错值或静默跳过
- 左右单位不同（
100px / 1rem）→ 直接报错，不提示具体原因 - 出现在
font、grid-template-columns、clip-path等原生 CSS 含/的位置 → 编译崩，报Invalid CSS after "px/1.5" - 哪怕你写的是纯数字
100 / 3，Dart Sass 也只在极窄上下文中才执行除法，其余一律警告
math.div() 不是可选项，是唯一确定性方案
它不依赖上下文猜测，只做一件事：数值除法。但必须按规则用，否则照样报错：
- 必须先
@use "sass:math"，且调用时带命名空间：math.div($a, $b)，不能省略math. - 参数类型要一致：
math.div(100px, 2)✅，math.div(100px, 2rem)❌（跨单位不支持） - 不能用于运行时值：
math.div(var(--col), 2)语法错误，CSS 变量必须交给calc() - 精度默认保留 10 位小数，调试时看着吓人，但浏览器渲染无影响；如需控制位数，用
round(math.div(14px, 16px), 3)
哪些地方还允许用 /？别乱删
不是所有 / 都要动。以下场景仍安全，改了反而引入 bug：
-
calc()内部：width: calc(100% / 3)—— Sass 不解析calc体，完全交由浏览器 - URL、伪元素内容、渐变方向：
url(./a.svg)、content: "/"、linear-gradient(to right, a, b) - 纯 CSS 字面量且无数字参与：
margin: 0 auto、border: 1px solid #000
真正要动手的，只有变量参与计算、或出现在 font/grid/clip-path 等高危属性值里的 /。
第三方库报错（如 element-ui、bootstrap）怎么办
你改不了 node_modules 里的源码，硬改会被覆盖。可行路径只有三条：
- 等库方升级（查其 GitHub issues 是否已修复
math.div用法） - 临时锁定 Sass 版本为
1.62.1（最后一个支持全局函数和/的稳定版） - 用 patch-package 打补丁，或通过 Vite / Vue CLI 的
additionalData注入预处理逻辑（仅限简单替换）
最易忽略的一点：很多项目在全局注入变量（比如通过 additionalData 加载 _vars.scss），如果那个文件里本身含裸 /，同样会触发警告——得一并清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
