SCSS加减法只允许相同单位或无单位数参与运算，如10px + 5em会报“Incompatible units”错误；单位不兼容时需显式转换或改用calc()处理混合单位。
SCSS加减法只允许相同单位或无单位数参与运算
直接写 10px + 5em 或 20rem - 10% 会报错 Incompatible units: 'em' and 'px'，这不是 bug，而是 SCSS 强制你明确单位意图。它不自动转换相对单位（em、rem、%）和绝对单位（px、pt 等），也不做运行时推导。
-
100px + 20✅ 合法：无单位数可与任意带单位值相加减，结果继承左操作数单位 -
100px + 20px✅ 合法：单位一致，结果为120px -
100pt - 20px✅ 合法：SCSS 会将20px转为pt（按 72dpi 换算），结果单位为pt -
100rem + 10em❌ 报错：不同相对单位不可通约，无法自动归一化 -
100% + 20px❌ 报错：百分比与像素语义冲突，SCSS 不猜测你想要“视口宽+像素”还是“父容器宽+像素”
想混用单位？必须显式转换单位或改用 calc()
如果你真需要类似“容器宽减去固定侧边栏”的效果，别硬凑 SCSS 加减，分层处理更可靠：
- 纯 SCSS 计算：仅用于已知单位一致的场景，比如栅格列宽
(100% / 12) * 3，或字体缩放1rem * 1.25 - 交由
calc()处理混合单位：SCSS 编译期输出字符串，浏览器运行时计算，如width: calc(100% - #{$sidebar-width}); - 避免在
calc()内写 SCSS 运算符：calc(100% - $sidebar-width)是无效语法，$sidebar-width不会被解析 - 若变量含单位（如
$sidebar-width: 240px），插值后必须确保格式合法：calc(100% - #{$sidebar-width})→calc(100% - 240px)
除法/乘法中单位混用的典型陷阱
乘法要求「仅一个操作数带单位」，除法则常因括号缺失失效——这两类错误容易被当成加减问题误判：
-
20px * 10px❌ 报错：200px*px不是合法 CSS 值；正确写法是20px * 10（结果200px） -
100px / 2✅ 可行，但100% / 3在旧版 Sass 中可能静默失败或警告；稳妥写法是(100% / 3)或math.div(100%, 3) -
line-height: 1.5 / 16px❌ 错误：SCSS 会尝试把1.5除以16px，单位不匹配；应写作line-height: #{1.5} / #{16px}（纯拼接） - 从 map 或函数取值时，先用
@if unitless($val) { $val: $val * 1px; }统一单位再参与运算，否则map-get($config, size)返回16或16px会导致后续+ 2行为不一致
去单位最稳的方式是除以 1px
当你需要把 24px 变成纯数字 24 做比例计算（比如转 rem），别依赖 unitless() 判断分支，直接用 $val / 1px：
立即学习“前端免费学习笔记（深入）”；
-
$size: 24px; $num: $size / 1px;→$num是数值24，可安全用于font-size: #{$num / 16}rem -
$size: 14;（无单位）→$size / 1px会报错，需兜底：@if unitless($size) { $size: $size * 1px; } - 别写
$size / 16试图“去掉 px”——这不会去单位，只是除法，结果仍是1.5px（如果原值是24px） -
unquote()和#{}插值只管字符串拼接，不解决单位逻辑；真正要算，就得在 SCSS 层把单位剥离干净
单位混用不是配置问题，是设计决策问题。SCSS 把单位检查放在编译期，就是为了让你在写的时候就意识到：这个值到底代表什么，它的变化是否可预期。强行绕过只会让维护成本翻倍。
