dart sass 2.0+ 彻底移除 / 除法运算符，因其与css分隔符（如font: 14px/1.5）语义冲突；必须改用math.div()，且需@use "sass:math"、带命名空间调用、参数单位一致，calc()内/仍安全。
因为 / 不再是除法运算符，而是被 Dart Sass 2.0+ 彻底移除——所有未替换的 /（在 calc() 外）都会直接报错，不是警告，编译直接中断。
为什么 / 在 Sass 层面彻底失效？
根本矛盾是语义冲突：/ 在 CSS 里是分隔符（比如 font: 14px/1.5 sans-serif），在旧 Sass 里又被当运算符。Dart Sass 2.0 不再“猜”意图，而是分层解析：CSS 原生上下文（如 calc() 内）的 / 保留；Sass 编译层的除法必须显式用 math.div()。
- 错误示例：
width: 100% / 3;→ 报错Invalid CSS after "100%": expected expression - 正确写法：
width: math.div(100%, 3);，且必须先@use "sass:math"; - 哪怕
$a: 1rem; $b: 2; width: $a / $b;也会失败——它不进calc()，纯 Sass 层，必须改
math.div() 调用失败的常见原因
它不是语法糖，是强约束函数：单位必须一致、命名空间不可省略、不能混用 CSS 变量。
- 必须
@use "sass:math";，调用时写全math.div($a, $b)，不能只写div($a, $b) -
math.div(16px, 2)✅，math.div(1rem, 2)❌（1rem是带单位值，但单位与数字不匹配） - 想用
1rem，得先转成数值：math.div(math.convert(1rem, px), 2)或统一用无单位数：$base: 16; math.div($base, 2) -
math.div(var(--size), 2)无效——CSS 变量只能在calc()中运行时计算
哪些地方的 / 容易被漏掉？
除法表达式藏在非数学场景里，旧写法会触发歧义解析，但报错位置往往不直观。
-
grid-template-columns: 1fr / 2fr / 1fr;→ 这里的/是 CSS Grid 分隔符，**不用改**；但若写成1fr / 2（想算比例），就错了 -
clip-path: polygon(0% 0%, 50% / 2, 100% 0%);→50% / 2是 Sass 层运算，必须改成math.div(50%, 2) -
@for $i from 1 through 3 { .col-#{$i} { width: 100% / $i; } }→ 循环内所有/都要替换 - 响应式断点里：
@media (max-width: 768px / 2) { ... }→ 错误，应为math.div(768px, 2)
真正难的不是改写 /，而是意识到 Dart Sass 不再帮你兜底：它要求你明确区分「哪里是 CSS 原生语法」和「哪里是 Sass 编译逻辑」。漏掉一个 math.div()，或者在不该用 / 的地方硬加，编译就停住——没有模糊地带。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
