dart sass 2.0+ 废除全局 / 运算符，所有非 calc() 内的 / 均硬性报错；必须用 @use "sass:math" 后调用 math.div($a, $b)，且参数单位需一致，calc() 内 / 除外。
它没废弃“除法函数”，而是彻底干掉了 / 运算符本身——所有未替换的 /（在 calc() 外）都会直接编译失败，不是警告，是硬性报错。
为什么 / 在 Dart Sass 2.0+ 中直接报错
根本原因是语义冲突：/ 在 CSS 里是分隔符（比如 font: 14px/1.5 sans-serif），在旧 Sass 里又被当运算符。Dart Sass 2.0 不再“猜”你写的是字体行高还是除法，词法解析层就拒绝模糊表达。
-
width: 100% / 3→ 报错Invalid CSS after "100%": expected expression -
$size: 1rem / 2→ 同样失败，哪怕变量已定义 -
grid-template-columns: 1fr / 2fr→ 看似是 grid 语法，但旧写法会被误判为除法，触发解析歧义 - 括号无效：
(100px / 4)不能绕过，解析器不看括号，只看/出现场景
必须用 math.div() 的三个硬性条件
这不是可选语法糖，是唯一合法路径，且规则极严：
- 必须先
@use "sass:math"（引号、冒号、路径全对，@import或sass/math都会报Can't find stylesheet to import） - 调用必须带命名空间：
math.div($a, $b)，不能省略math. - 两个参数单位必须一致或都无单位：
math.div(100px, 2)✅，math.div(16px, 1rem)❌（直接报错），math.div(var(--size), 2)❌（CSS 变量不支持）
calc() 里的 / 为什么不用改
因为这是 CSS 原生上下文，Dart Sass 2.0 明确分层：进入 calc()、min()、max() 后，/ 交由浏览器级 CSS 解析器处理，完全安全。
-
width: calc(100% / 3)✅ 无需动 -
padding: calc(1rem / 2)✅ 也 OK - 但
$val: calc(100% / 3)❌ 错误——变量赋值属于 Sass 层，不能套calc()当运算容器 - 别混用：
math.div(100%, 3) + "px"是错的，math.div(100%, 3)已返回33.33333%，加字符串会得33.33333%px
最容易漏改的五个地方
迁移时真正卡住人的，往往不是显眼的 $width / 2，而是这些隐性位置：
-
clip-path: polygon(0 0, 100% 0, 100% / 2 100%, 0 100%)→/在函数参数里，旧写法会崩 -
@for $i from 1 through length($list) { .item-#{$i} { width: 100% / $i; } }→ 循环内除法必须全换math.div(100%, $i) -
background: linear-gradient(to right, red 0%, blue 50% / 2);→/在 gradient stop 里，属 CSS 原生语法，但旧 Sass 解析器可能误判 -
@container (width > 300px / 2) { ... }→@container条件表达式是 Sass 层，必须写math.div(300px, 2) -
:deep(.foo) { margin: 1rem / 2; }→ Vue 3 的:deep()内部仍是 Sass 上下文，/不被放过
真正难的不是写对 math.div()，而是意识到：Dart Sass 2.0 不再帮你兜底，所有 / 都必须明确归属——要么是 CSS 原生分隔（如 font），要么是 calc() 内除法，其余一律走 math.div()。漏掉一个，编译就停。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
