dart sass ≥1.70 中 / 除法报错是设计性拦截，仅 font、calc()、url 等白名单上下文安全；变量赋值、width 等非白名单位置必须用 @use "sass:math" 后调用 math.div($a, $b)，参数需同单位且为数值。
直接写 / 做除法在 Dart Sass ≥1.70（Vite 5+ 默认）中会报 Invalid CSS after "100px"，这不是 bug，是设计性拦截——Sass 不再猜测你写的是 CSS 分隔符还是数学运算符。
哪些地方的 / 会触发编译报错
只要 / 出现在非白名单 CSS 属性值中，且左右任一侧含单位或变量，就会崩：
-
$size: 100px / 4→ ❌ 变量赋值上下文不被信任 -
width: $container-width / 2→ ❌ 属性值中非白名单位置 -
font-size: 1.5rem / 16→ ❌ 单位与无单位数混合，结果不是你要的基准比（得到0.09375rem，而非1.5） -
(100px / 4)→ ❌ 括号不改变解析规则，照样报错
必须用 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（非法）
哪些地方的 / 其实不用动
不是所有斜杠都要改，动了反而坏：
-
calc(100% / 3)→ ✅calc()内部完全不被 Sass 解析，浏览器 runtime 执行 -
url(./a.svg)、content: "/"、linear-gradient(to right, a, b)→ ✅ 上下文明确，不触发除法解析 -
font: 14px/1.5 sans-serif→ ✅font是白名单属性，原写法仍安全 -
grid-template-columns: 1fr/2fr→ ⚠️ 看版本：Dart Sass ≥3.4 后这里也会报错，需改用引号或插值：grid-template-columns: "1fr/2fr"或grid-template-columns: #{"1fr/2fr"}
最容易被忽略的是单位隐式转换——比如想把 1.5rem 换算成相对于 1rem 的无单位比值，得先 math.div(1.5rem, 1rem) 得到 1.5，再参与后续计算；直接 math.div(1.5rem, 16) 结果是 0.09375rem，不是你要的基准比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
