Sass 4.0+ 中 / 报错是设计性拦截，仅允许在 font、grid 等白名单 CSS 属性中使用，其余位置（如变量赋值、width 值）一律报 Invalid CSS；必须用 @use "sass:math" 后调用 math.div($a, $b)，参数需同单位且为数值，不可传 CSS 变量或拼接单位。
因为你在 Sass 4.0+ 中直接用了 / 做除法，而它已被严格限制——不是语法错误，是设计性拦截。
为什么 / 在 Sass 4.0+ 中突然报错？
Sass 不再“猜”你写的是 CSS 分隔符还是数学运算符。它只在极少数原生 CSS 属性（如 font、grid-template-columns、clip-path）中允许 / 出现；其他所有位置，只要左边是带单位的值或变量，就会直接报 Invalid CSS after "100px"。
-
font: 14px/1.5 sans-serif→ ✅ 安全（font属于白名单属性） -
$size: 100px / 4→ ❌ 报错（变量赋值上下文不被信任） -
width: $container-width / 2→ ❌ 报错（属性值中非白名单位置） -
(100px / 4)→ ❌ 无效（括号不改变解析规则，/仍被拒）
math.div() 怎么用才不踩坑？
必须显式导入、参数类型干净、单位一致，否则照样崩：
- 开头加
@use "sass:math"，调用时不能省略命名空间：math.div($a, $b) - 两个参数都得是数值类型：
math.div(100px, 2)✅，math.div(100px, 2rem)❌（单位不匹配） - 不能传 CSS 变量：
math.div(var(--col), 2)语法错误（math.*是纯编译期函数） - 结果已带单位，别再拼：
math.div(100px, 2) + px→ 得到50pxpx（非法）
哪些地方还能放心用 /？别一刀切删
不是所有 / 都要改。以下场景仍安全，动了反而坏：
立即学习“前端免费学习笔记（深入）”；
-
calc()内部：width: calc(100% / 3)—— Sass 不解析，浏览器 runtime 执行 - URL、伪元素内容、渐变方向：
url(./a.svg)、content: "/"、linear-gradient(to right, a, b) - 纯 CSS 字面量且无数字参与：
margin: 0 auto、border: 1px solid #000
真正要动手的，只有变量参与计算、或出现在 font/grid/clip-path 等高危属性值里的 /。最容易被忽略的是单位隐式转换——比如想把 1.5rem 换算成相对于 16px 的无单位比值，得先 math.div(1.5rem, 1rem) 得到 1.5，再除；直接 math.div(1.5rem, 16) 结果是 0.09375rem，不是你要的基准比。
