Dart Sass 4.0+ 弃用 / 除法是规范演进，非 bug：仅 calc() 内、font 等白名单属性中 / 安全，其余必须改用 math.div() 或插值；math.div() 需 @use 引入、参数单位匹配、结果自带单位，不可重复加 px。
直接结论：警告 Using / for division outside of calc() is deprecated 不是 bug，而是 Dart Sass 4.0+ 的强制演进——你必须把所有非 calc() 上下文里的 / 替换为 math.div()，或改用 calc() 字符串插值。降版本只是临时止痛，不是修复。
为什么 / 突然被标为弃用？
Sass 不再“猜”你是想做除法还是写 CSS 分隔符。它现在严格遵循 CSS 规范：/ 只允许出现在 font、grid-template-columns、clip-path 等原生属性中；其余所有位置（变量赋值、mixin 参数、width 值等），一律视为语法风险点。
-
font: 14px/1.5 sans-serif→ ✅ 白名单内，安全 -
$size: 100px / 4→ ❌ 编译失败，报Invalid CSS after "100px" -
width: $container-width / 2→ ❌ 同样崩，括号(...)无效 -
calc(100% / 3)→ ✅ 浏览器 runtime 执行，Sass 不解析，始终安全
怎么用 math.div() 才不翻车？
它不是语法糖，是编译期纯数值函数，参数和单位都得干净：
- 开头必须加
@use "sass:math"，调用时不能省略命名空间：math.div($a, $b) - 两个参数必须是数值类型：
math.div(100px, 2)✅，math.div(100px, 2rem)❌（单位不匹配） - 结果已带单位：
math.div(100px, 2)返回50px，别再拼+ px，否则得50pxpx - 除零不报错但返回
Infinity，CSS 无效，需手动 guard：@if $b != 0 { ... } - 想算无单位比值（如
1.5rem / 16px得到1.5），得先转基准：math.div(1.5rem, 1rem)→1.5，再除16
哪些地方还能留着 / 不动？
不是所有 / 都要改，乱动反而引入 bug：
-
calc()内部：width: calc(100% / 3)—— 安全，保留 - URL、伪元素内容、渐变方向：
content: "/"、url(./a.svg)、linear-gradient(to right, a, b)—— 安全 - 纯 CSS 字面量且无数字参与：
margin: 0 auto、border: 1px solid #000—— 安全 - 真正要动手的只有：变量赋值、mixin 计算、属性值中非白名单上下文的除法
最常被忽略的不是语法，而是单位语义——math.div(1.5rem, 16) 得到的是 0.09375rem，不是你想表达的“相对于 16px 的缩放系数”。这层隐式转换，必须靠显式单位对齐来破。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
