新版 sass 中 100px / 2 报错是因 / 被严格限定为 css 分隔符而非除法运算符，必须用 @use "sass:math" 后调用 math.div($a, $b)，且参数单位需一致或均无单位。
新版 Sass（Dart Sass ≥1.33.0）中直接写 100px / 2 无法编译，不是 bug，是设计性拦截——/ 已被严格限制为 CSS 原生分隔符，不再默认解析为除法运算符。
为什么 / 会报 Invalid CSS after "100px"？
Sass 解析器不再“猜测”你写的是运算还是 CSS 语法。只要左边是带单位的值（如 100px、$width），右边不是纯数字变量或未加括号，就直接拒绝解析，抛出语法错误。
-
$size: 100px / 4;→ 编译失败 -
width: $container-width / 2;→ 同样失败 -
(100px / 4)→ 括号无效，不改变解析规则 -
font: 14px/1.5 sans-serif;→ ✅ 白名单属性，仍合法
必须用 math.div() 替代，但调用方式很苛刻
它不是语法糖，是唯一确定性方案，但规则硬：
- 开头必须写
@use "sass:math";，不能用@import - 调用必须带命名空间：
math.div($a, $b)，写成div($a, $b)或sass.div()都无效 - 两个参数单位必须一致或都无单位：
math.div(100px, 2)✅，math.div(100px, 1rem)❌（编译报错） - 不能传 CSS 变量：
math.div(var(--size), 2)是语法错误——math.*是纯编译期函数，只认 Sass 变量和字面量 - 结果已含单位，别再拼：
math.div(100px, 2) + px→50pxpx（非法 CSS）
哪些地方还能放心用 /？别一刀切改错
不是所有 / 都要替换。以下场景仍安全，动了反而坏：
-
calc(100% / 3)—— 浏览器 runtime 执行，Sass 不解析 -
font: 14px/1.5 sans-serif;——font是白名单属性 -
grid-template-columns: 1fr/2fr;—— Dart Sass ≥4.0 保留为原生语法 -
content: "/";、url(./img.svg)、linear-gradient(to right, a, b) -
border-radius: 50% / 30%;、grid-area: 1 / 2 / 3 / 4;
最容易被忽略的坑：单位隐式转换
想把 1.5rem 换算成相对于 16px 的比值（即 1.5），不能直接 math.div(1.5rem, 16)——结果是 0.09375rem，不是你要的无单位数。
- 正确做法是先统一基准：
math.div(1.5rem, 1rem)得到1.5，再参与后续计算 -
mixin里动态算列宽、响应式断点缩放、颜色透明度拆分，这类逻辑最容易漏掉单位归一这步 - 除零不会报错，但返回
Infinity，CSS 中无效，需手动@if $denominator != 0 { ... }
真正麻烦的不是写法变长，而是旧项目里散落各处的 / 很难靠 grep 全部定位——尤其夹在字符串、注释或 CSS 值中间时。迁移前建议先跑一遍构建，再配合 IDE 的“引用未使用变量”提示反向排查 math 函数缺失点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
