为什么我的CSS在Sass编译时会出现除法运算报错

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，不是你要的基准比。