Sass编译CSS除法报错原因

Sass 4.0+ 中除法运算报错？别慌，这是设计上的“断舍离”

先看一段代码：$size: 100px / 4;。在 Sass 4.0+ 中，这行代码会直接报 Invalid CSS after "100px"。这不是你的语法有误，而是 Sass 对 / 运算符的态度发生了根本性转变——从“兼容并包”变成了“严格甄别”。说白了，它不再猜测你写的是 CSS 分隔符还是数学运算符，而是直接划了条红线：绝大多数位置，/ 只属于 CSS 语法，不参与编译期计算。

为什么 / 在 Sass 4.0+ 中突然报错？

背后的逻辑非常清晰：Sass 团队想让“/”回归它最本分的角色——表示 CSS 属性值中的分隔符。只有在少数几个原生 CSS 属性（如 font、grid-template-columns、clip-path）中，/ 才被允许出现；其他所有位置，只要是左边跟着带单位的值或变量，就会直接判定为无效 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 不解析，浏览器 runtime 执行。
• 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()。