Sass 4.0+ 除法运算报错怎么办？理解设计上的“断舍离”
来看一段示例代码：$size: 100px / 4;。在 Sass 4.0+ 版本中，这行代码会直接触发编译错误 Invalid CSS after "100px"。这并不是你的语法写错了，而是 Sass 对 / 运算符的使用规则发生了根本性变化——从之前的“兼容并包”转变为现在的“严格甄别”。简单来说，Sass 不再猜测你写的是 CSS 分隔符还是数学运算符，而是直接划了一条红线：在绝大多数情况下，/ 只属于 CSS 语法，不再参与编译期的计算。
为什么 / 在 Sass 4.0+ 中会报错？
背后的设计逻辑非常清晰：Sass 团队希望让 / 回归它最本来的角色——即表示 CSS 属性值中的分隔符。只有在少数几个原生 CSS 属性中，比如 font、grid-template-columns、clip-path，/ 才被允许出现；在其他所有位置，只要左边跟着带单位的值或变量，Sass 就会直接将其判定为无效 CSS。
font: 14px/1.5 sans-serif→ ✅ 安全可用（因为font属于白名单属性）$size: 100px / 4→ ❌ 编译报错（变量赋值上下文不被信任）width: $container-width / 2→ ❌ 同样报错（属性值中非白名单位置）(100px / 4)→ ❌ 无效操作（括号无法改变解析规则，/依然被拒绝）
这个新规则虽然看起来有些“一刀切”，但好处是让代码意图更加明确，不再存在模棱两可的解读空间。
math.div() 怎么用才不踩坑？
既然 / 被限制使用了，那么真正的除法运算应该怎么做？答案是：显式引入 sass:math 模块，并调用 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，这是非法值。
最容易忽略的是单位隐式转换。例如，如果你想把 1.5rem 换算成相对于 16px 的无单位比值，需要先通过 math.div(1.5rem, 1rem) 得到 1.5，然后再进行其他除法运算；如果直接写 math.div(1.5rem, 16)，结果会是 0.09375rem，并不是你想要的基准比值。
哪些地方还能放心用 /？不要一刀切全部删除
这个新规则最让人头疼的地方在于：你不能对所有 / 都进行替换。以下场景中仍然可以安全使用，如果随意修改反而会破坏代码的语义：
calc()内部，例如width: calc(100% / 3)，Sass 不会解析这个除法，而是由浏览器运行时执行。- URL、伪元素内容、渐变方向等，例如
url(./a.svg)、content: "/"、linear-gradient(to right, a, b)，这些都不受影响。 - 纯 CSS 字面量且没有数字参与的情况，例如
margin: 0 auto、border: 1px solid #000，也无需修改。
真正需要动手清理的，只有那些变量参与计算，或者出现在 font、grid、clip-path 等高危属性值中的 /。简单来说：如果某个 / 两边都是数字或有单位的变量，并且不属于白名单属性，那就必须替换为 math.div()。
