新版 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）、右边不是纯数字，且上下文不在白名单属性里，就崩：
-
$size: 100px / 4→ 报错：变量赋值不被信任 -
width: $container-width / 2→ 报错：普通 CSS 属性值中禁用 -
(100px / 4)→ 报错：括号不改变解析规则 -
font-size: 1.5rem / 16→ 报错：单位与数字混用，且非白名单属性
为什么 font: 14px/1.5 sans-serif 却能过？
因为 font 是 Sass 明确放行的白名单属性之一（还有 grid-template-columns、clip-path、background 等），Sass 会把它当原生 CSS 解析，不走数学运算流程。
- 安全：
font: 12px/24px sans-serif、grid-template-columns: 1fr/2fr - 危险：
font-size: 12px/24px→ 即使看起来一样，但属性名不对，照样报错 - 别指望插值兜底：
font: #{"12px/24px sans-serif"}虽然能绕过，但失去类型校验和单位计算能力
必须改用 math.div() 的三个硬条件
不是加个 @use 就万事大吉，漏掉任意一条都会编译失败或结果错乱：
- 开头必须写
@use "sass:math"，不能用@import，也不能省略引号 - 调用必须带命名空间：
math.div($a, $b)，写成div($a, $b)或sass.div()都无效 - 两个参数单位必须一致或都无单位：
math.div(100px, 2)✅，math.div(1rem, 2)✅，math.div(100px, 1rem)❌（单位不匹配直接报错） - 结果已含单位，别再拼：
math.div(100px, 2) + px→ 得到50pxpx（非法 CSS）
calc() 里的 / 为什么不用动？
因为 calc() 是浏览器运行时执行的原生 CSS 函数，Sass 完全不解析它内部内容——width: calc(100% / 3)、margin: calc(1rem / 2) 全部保留原样输出，无需任何修改。
- 同理安全的还有：
url(./a.svg)、content: "/"、linear-gradient(to right, a, b) - 真正要动手的，只有变量参与计算、或出现在非白名单属性值里的
/ - 最容易忽略的是单位隐式转换：想把
1.5rem换算成相对于1rem的比值，得先math.div(1.5rem, 1rem)得到1.5，而不是math.div(1.5rem, 16)（结果是0.09375rem，不是你要的无单位数）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
