math.compatible 不存在于 dart sass 或任何 sass 版本中，是常见误解；真实单位处理需显式校验、归一化或交由 calc() 动态计算。
math.compatible 不是 SCSS 的函数，它根本不存在——Dart Sass 官方文档里没有这个 API，所有版本的 Sass 都不提供 math.compatible。你看到的要么是拼写错误，要么是混淆了其他工具（比如 PostCSS 插件或自定义函数名），也可能是把 math.div()、unitless() 或类型判断逻辑记混了。
为什么有人会误以为有 math.compatible？
常见诱因是遇到单位报错 Incompatible units 后，在搜索引擎里输入错误关键词，结果被误导到非官方博客或过时的 Ruby Sass 文档。真实场景中，SCSS 从不自动“兼容”单位，它只做严格校验：
- 加减法要求单位完全一致（
10px + 5px✅，10px + 5em❌） - 乘法只允许一个操作数带单位（
20px * 2✅，20px * 2px❌） - 除法若两边都带单位，结果是无量纲数字（
100px / 20px→5），但100% / 20px直接报错
真正该用的单位检查和转换手段
替代“兼容”的实际做法是显式判断+归一化，不是靠虚构函数兜底：
- 用
unitless($val)判断是否为纯数字，再决定是否补单位：@if unitless($val) { $val: $val * 1px; } - 用
$val / 1px剥离单位最稳，比strip-unit()（已弃用）或unitless()+ 分支更可靠 - 用
unit($val) == 'px'校验单位类型，避免传入em或%导致后续运算崩掉 - 需要“混合单位动态计算”？别在 SCSS 里硬凑，交给
calc()：例如width: calc(100% - #{$sidebar-width});
函数里处理单位最易翻车的点
写自定义函数时，这几个细节漏掉一个就会编译失败：
- 没对输入值做单位校验，直接
$px / $base—— 若$px是14（无单位），$base是100px，就触发Operation on an invalid type - 返回值单位混乱：
@return $px / $base * 1rem看似合理，但若$px是14px，$base是100（无单位），结果是0.14px * 1rem，非法 - 把 CSS 变量
var(--size)当 SCSS 变量用，试图对它做/或*—— 编译器根本不解析var()，直接原样输出，运算根本不会发生
单位问题从来不是“能不能兼容”，而是“你有没有在编译期就把单位意图说清楚”。SCSS 不帮你猜，它只执行你明确写出的规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
