为什么新版Sass中的CSS除法语法会报错

新版 Sass 中 / 不再自动识别为除法运算符，仅在白名单属性（如 font、grid-template-columns）中保留 CSS 原生解析；其余场景必须用 math.div()，且需 @use "sass:math"、带命名空间调用、单位一致。

新版 Sass（Dart Sass ≥1.33.0，尤其是 ≥4.0）中直接写 / 做除法会报 Invalid CSS after "100px"，不是 bug，是设计性拦截——Sass 不再“猜”你写的是 CSS 分隔符还是数学运算符，而是严格限定 / 的使用范围。

哪些地方写 / 会直接报错？

只要左边是带单位的值（如 100px、$width）、右边不是纯数字，且上下文不在白名单属性里，就崩：

1. $size: 100px / 4 → 报错：变量赋值不被信任
2. width: $container-width / 2 → 报错：普通 CSS 属性值中禁用
3. (100px / 4) → 报错：括号不改变解析规则
4. font-size: 1.5rem / 16 → 报错：单位与数字混用，且非白名单属性

为什么 font: 14px/1.5 sans-serif 却能过？

因为 font 是 Sass 明确放行的白名单属性之一（还有 grid-template-columns、clip-path、background 等），Sass 会把它当原生 CSS 解析，不走数学运算流程。

1. 安全：font: 12px/24px sans-serif、grid-template-columns: 1fr/2fr
2. 危险：font-size: 12px/24px → 即使看起来一样，但属性名不对，照样报错
3. 别指望插值兜底：font: #{"12px/24px sans-serif"} 虽然能绕过，但失去类型校验和单位计算能力

必须改用 math.div() 的三个硬条件

不是加个 @use 就万事大吉，漏掉任意一条都会编译失败或结果错乱：

1. 开头必须写 @use "sass:math"，不能用 @import，也不能省略引号
2. 调用必须带命名空间：math.div($a, $b)，写成 div($a, $b) 或 sass.div() 都无效
3. 两个参数单位必须一致或都无单位：math.div(100px, 2) ✅，math.div(1rem, 2) ✅，math.div(100px, 1rem) ❌（单位不匹配直接报错）
4. 结果已含单位，别再拼：math.div(100px, 2) + px → 得到 50pxpx（非法 CSS）

calc() 里的 / 为什么不用动？

因为 calc() 是浏览器运行时执行的原生 CSS 函数，Sass 完全不解析它内部内容——width: calc(100% / 3)、margin: calc(1rem / 2) 全部保留原样输出，无需任何修改。

1. 同理安全的还有：url(./a.svg)、content: "/"、linear-gradient(to right, a, b)
2. 真正要动手的，只有变量参与计算、或出现在非白名单属性值里的 /
3. 最容易忽略的是单位隐式转换：想把 1.5rem 换算成相对于 1rem 的比值，得先 math.div(1.5rem, 1rem) 得到 1.5，而不是 math.div(1.5rem, 16)（结果是 0.09375rem，不是你要的无单位数）