Dart Sass 2.0+ 彻底移除 / 作为除法运算符，因其与CSS分隔符语义冲突；必须用 math.div() 替代（需 @use "sass:math"），而 calc() 内的 / 仍安全。
为什么/在Sass里突然编译失败？
不是 Sass “弃用”了 /，而是 Dart Sass 2.0+ 彻底移除了它作为运算符的语法支持——所有未包裹在 calc() 内、且不在受保护上下文中的 /，都会直接报错：Invalid CSS after "100%": expected expression。这不是警告，是编译中断。
根本原因是语义冲突：/ 在 CSS 中本就是分隔符（如 font: 16px/1.5 sans-serif），而 Sass 旧版靠“猜上下文”来决定是否做除法，极易误判。Dart Sass 放弃猜测，只保留两种确定性路径：Sass 层用 math.div()，CSS 层用 calc()。
如何安全输出 CSS 原生除法（比如 calc(100% / 3)）？
calc() 内部的 / 是完全安全的，Dart Sass 2.0+ 对其不做任何 Sass 层解析，交由浏览器原生处理。你只需确保：
- 字符串拼写完整，空格不可省：
calc(100% / 3)✅，calc(100%/3)❌（浏览器静默丢弃） - 不把 Sass 变量直接塞进
calc()而不做插值：calc($width / 3)会触发 Sass 除法（错误）；正确写法是calc(#{$width} / 3) - 若变量含单位（如
$gap: 20px），插值后仍是合法单位：calc(100vh - #{$gap})→calc(100vh - 20px)
哪些地方的/不能用math.div()替换？
全局搜索替换 / → math.div() 是高危操作，以下三类必须跳过：
- CSS 属性值中的斜杠：如
font: 16px/1.5 sans-serif、grid-template-columns: 1fr/2fr、clip-path: polygon(0 0, 100% 0, 100%/2 100%)—— 这些/是 CSS 语法分隔符，不是运算，必须保留原样 - 带单位混合的表达式：如
$width / 2 + 10px，强行拆成math.div($width, 2) + 10px语法虽通但可读性差；推荐改用括号写法：($width / 2) + 10px（触发受保护除法，无需math.div()） -
url()、content、linear-gradient()等函数内的/：如url(./img/icon.svg)、content: "/"，这些与计算无关，替换会破坏路径或内容
math.div()调用失败的常见原因
即使版本达标（sass --version 显示 Dart Sass ≥ 1.33.0），math.div() 仍可能报错，关键检查点：
- 没
@use "sass:math"或重复@import了 math 相关文件 → 报错：Undefined function "math.div" - 参数单位不一致：
math.div(100px, 1rem)直接报Incompatible units px and rem；需先统一单位，例如math.div(100px, 16px)或转为无单位数math.div(100, 16) - 在
calc()外误用 CSS 变量：math.div(var(--size), 2)无效，因为var()是运行时行为，Sass 编译期无法解析；应改用calc(var(--size) / 2) - 用了 Node Sass 或旧版 sass-loader →
math.div()根本不存在，且calc(100% / 3)也会报错（因旧引擎把所有/当 Sass 运算符）
最易被忽略的是单位一致性——1rem 不等于 16px 在 Sass 编译期，它只是带单位的符号，不会自动换算。你得自己决定是在设计系统中统一用 px 计算，还是用 math.div($value * 1px, $base) 强制转换单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
