为什么Dart Sass取消了/除法运算符并对CSS有什么影响？

Dart Sass 2.0.0 起彻底移除 / 除法运算符，因其与CSS分隔符语义冲突；必须统一替换为 math.div()，需 @use "sass:math"、带命名空间调用、参数单位一致，而 calc() 内 / 仍安全。

它不是“取消”，而是彻底移除——Dart Sass 2.0.0 起，所有未替换的 /（在 calc() 外）都会直接编译失败，不是警告，是错误。

为什么 / 必须被干掉？

根本矛盾在于语义冲突：/ 在 CSS 里是分隔符（比如 font: 14px/1.5 sans-serif），在 Sass 里又被当运算符。Dart Sass 的解析器不再靠“猜”来决定哪边是除法、哪边是 CSS 原生写法，因为猜不准就会崩：

• font: 12px/24px sans-serif → 编译报错：Invalid CSS after "px/24px": expected expression
• width: 100% / 3 → 可能原样输出 100% / 3，没算成 33.33333%
• margin: 1rem / 2 → 若 1rem 来自变量且单位未显式携带，结果静默失效

math.div() 怎么用才不报错？

它不是语法糖，是唯一确定性方案，但规则硬：

• 必须先 @use "sass:math"，调用时必须带命名空间：math.div($a, $b)，不能省略 math.
• 参数单位必须一致或无单位：math.div(100px, 3) ✅，math.div(16px, 1rem) ❌（直接报错）
• 不支持 CSS 变量：math.div(var(--size), 2) 无效，calc() 才是运行时方案
• calc(100% / 3) 里的 / 安全，不用改——这是 CSS 原生上下文，Dart Sass 分层解析

为什么不能继续用 Node Sass？

不是“不推荐”，是根本跑不通：

立即学习“前端免费学习笔记（深入）”；

• calc(100% / 3) 在 Node Sass 里会报错：Invalid CSS after "100%": expected expression，因为它把所有 / 都当 Sass 运算符处理
• @container、color-mix()、@layer 等 2022 年后 CR 特性，Node Sass 解析器不认识 token，直接 Unknown at rule
• 即使加 // sass:disable-next-line 也无效——错误发生在词法解析层，还没走到“禁用”逻辑

真正容易被忽略的是：迁移不只是换包，而是重构所有除法表达式；math.div() 不自动做单位换算，1rem 得先转成 16px 或统一为无单位数再算；还有那些藏在 grid-template-columns、clip-path 里的 /，它们不是运算，但旧写法会触发解析歧义——这些地方反而最容易漏改。