报错是因为dart sass 1.33.0+主动将/视为css分隔符而非运算符，需用@use "sass:math"后调用math.div($a,$b)，参数单位必须一致且不可传css变量，calc()、font等白名单场景除外。
为什么 Sass 编译直接报 Invalid CSS after "100px"？
这不是 bug，是 Dart Sass 从 1.33.0 起主动拦截——/ 在绝大多数上下文里不再被识别为除法运算符，而是被当作 CSS 原生分隔符（如 font: 14px/1.5）处理。只要左边是带单位的值（比如 100px、$width），右边不是纯数字变量或未加括号，Sass 就会拒绝解析，直接抛错。
math.div() 怎么调用才不崩？
必须显式导入 + 命名空间调用 + 单位对齐，缺一不可：
-
@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)❌（编译报错） - 不能传 CSS 变量：
math.div(var(--size), 2)语法错误，这是编译期函数，只认 Sass 变量和字面量 - 结果已含单位，别再拼：
math.div(100px, 2) + px→50pxpx（非法 CSS）
哪些地方还能放心用 /？别改错了
不是所有 / 都要替换。以下场景仍合法，改了反而坏：
-
calc()内部：width: calc(100% / 3)—— 浏览器 runtime 执行，Sass 不解析 - 字体简写：
font: 14px/1.5 sans-serif——font是白名单属性 - grid/columns：
grid-template-columns: 1fr/2fr—— 注意：旧版 LibSass 会崩，但 Dart Sass ≥4.0 把它当原生语法保留 - 伪元素内容：
content: "/"、URL 路径：url(./img.svg)、渐变方向：to right - 纯分隔用途：
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，再参与后续计算。mixins 里动态算列宽、响应式断点缩放、颜色透明度拆分，这类逻辑最容易忽略单位归一这步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
