dart sass 4.0+ 彻底移除 / 除法语义，仅在 calc() 和少数白名单属性中保留原生解析；必须用 @use "sass:math" 后调用 math.div($a, $b)，且两参数单位须一致，否则编译失败。
直接用 math.div() 是唯一安全方式，前提是版本 ≥4.0、导入正确、参数单位一致——任何环节出错都会编译失败或结果错乱。
为什么不能继续写 100px / 2
Sass 4.0+ 已彻底移除 / 的除法语义，只在极少数白名单属性（如 font、grid-template-columns）中保留原生 CSS 解析。其他所有位置，只要左边是带单位的值或变量，就会报 Invalid CSS after "100px"。这不是警告，是硬性编译错误。
-
$size: 100px / 2;→ 编译失败 -
width: $container-width / 2;→ 同样失败 -
(100px / 2)或加注释也无效——括号不改变解析器对/的判定
必须满足的三个硬性条件
漏掉任意一条，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)❌（直接报错）
常见误用与单位陷阱
最容易被忽略的是单位隐式转换逻辑：
-
math.div(1.5rem, 16)返回0.09375rem，不是你想要的无单位比值（比如用于line-height） - 想得到相对于
1rem的纯数字比例，得先math.div(1.5rem, 1rem)→1.5，再参与后续计算 -
math.div(100px, 2) + px会生成50pxpx，非法 CSS —— 结果已含单位，别重复拼 -
math.div(var(--size), 2)语法错误 ——math.*是编译期函数，不支持运行时 CSS 变量
哪些地方根本不用改
不是所有 / 都要动，改了反而坏：
-
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
真正要动手的，只有变量参与计算、或出现在非白名单属性值里的 /。单位一致性检查和命名空间调用，是迁移中最常被跳过的两步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
