新版 dart sass 将 / 严格视为 css 分隔符而非除法运算符，故 100% / 3 不再计算；必须用 math.div(100%, 3) 显式运算，且禁止混单位、不支持 libsass。
新版 Dart Sass（2022 年后默认）把 / 从“可能的除法运算符”变成了“严格保留为 CSS 分隔符”，所以直接写 width: 100% / 3 会原样输出，不计算，甚至报错——这不是 bug，是设计变更。
为什么 100% / 3 突然不工作了
旧版 LibSass 会尝试在上下文里“猜”/ 是不是除法；Dart Sass 不再猜测，除非你明确告诉它：这是数学运算。否则它就当你是写 border: 1px solid #000 里的那个 /。
- 错误现象：
width: 100% / 3编译后还是width: 100% / 3，浏览器直接忽略或报 CSS 解析错误 - 更糟的情况：
$width: 100% / 3会触发Undefined operation，因为 Sass 拒绝把单位值直接当操作数 - 根本原因：Sass 需要数值参与运算，而
100%是带单位的量，不是纯数字；/本身不触发单位归一化
math.div() 是唯一可靠解法
必须显式调用 math.div()，并确保参数类型合法——它只接受同单位或无单位数值，且返回结果自动携带输入单位（如果有的话）。
- 正确写法：
@use "sass:math"; width: math.div(100%, 3);→ 输出width: 33.3333333333% - 带变量也安全：
$total: 12; $col: 4; width: math.div($col * 100%, $total); - 禁止混单位：
math.div(100px, 3em)直接报错，Sass 不做隐式换算 - 注意兼容性：LibSass 不支持
math模块，CI 构建失败大概率是你还在用旧引擎
for 循环里加 % 报错怎么破
像 @for $i from 1 through 12 { .col-#{$i} { width: $i * 8.33333%; } } 这种写法，在新版 Sass 里会卡在 $i * 8.33333% —— 因为 * 左右单位不匹配（$i 是无单位数，8.33333% 是带单位值），但乘法规则允许“一个带单位、一个不带”，所以实际能过；真正崩的是 $i % 这种裸写。
- 错误写法：
width: $i %→ Sass 认为你要取模，但$i后缺第二个操作数 - 经典绕过：
width: $i + 0%，靠加法把无单位数转成百分比值 - 更干净的写法：
width: #{$i}%，用插值强制字符串拼接，不走运算流程 - 别用
percentage($i)，它只接受小数（如0.33），对整数$i会报 “argument must be a number between 0 and 1”
calc() 不能在 Sass 变量里提前算
看到别人写 $width: calc(100% / 3) 就抄？停。Sass 不解析 calc() 内容，它只是原样透传。所以 $width 存的是字符串，不是数值，后续无法参与任何 math.* 运算或条件判断。
- 错误示范：
$w: calc(100% / 3); width: $w;→ 输出width: calc(100% / 3);，没毛病但毫无编译时价值 - 想动态生成栅格？用
math.div()先算出精确百分比值，再拼进calc()表达式里，比如：width: calc(#{math.div(100, $cols)}% - 1px); - 真正需要运行时响应的（比如依赖 CSS 自定义属性），才该把整个
calc()当字符串输出，别指望 Sass 帮你算
最易被忽略的一点：所有涉及 / 的表达式，只要没套 math.div() 或括号包裹，就不是在做除法——它只是 CSS 字符串里的斜杠。别依赖视觉或旧经验判断是否生效，打开编译后 CSS 文件看一眼输出，才是最终答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
