scss不支持px与rem自动换算，因二者无内置换算规则，仅允许相同单位、无单位数与带单位数、或有确定换算关系的单位间运算；需统一基准（如$base-font-size: 16px）转为比例后计算。
为什么 10px + 1rem 会报 “Incompatible units”？
SCSS 不做单位自动换算，它只允许单位兼容的运算：相同单位（10px + 5px）、无单位数与带单位数（2 * 16px）、或有确定换算关系的单位（如 1in / 96 → 1px）。px 和 rem 之间没有内置换算规则，所以 10px + 1rem 直接报错。
常见翻车点：
-
font-size: 14px + 0.2rem→ 报错，不是“想加就加” -
margin: 1rem / 2→ 若1rem来自未显式带单位的变量，可能静默失败 -
width: 100vw / 3→vw是运行时单位，Sass 编译期不认，直接 Invalid CSS
解决思路是统一基准再算。比如定义 $base-font-size: 16px，然后把所有值转成相对于它的比例：14px / $base-font-size 得 0.875rem，1rem / $base-font-size 得 1rem（即 1），再相加就合法。
math.div() 调用时报 “Function not found” 怎么办？
这不是版本太低，而是 Dart Sass ≥1.33 后强制要求显式导入和命名空间——@use "sass:math" 必须写，且调用必须带前缀 math.div()，不能省略 math.。
实操要点：
- 在入口文件（如
_index.scss）顶部加@use "sass:math" as math - 子文件通过
@use继承，不要重复写@use -
math.div(100px, 2)✅；math.div(100px, 1rem)❌（单位不匹配，报错） - 旧项目升级后，全局搜
/运算符，尤其检查 mixin 和循环里的变量除法
别用 @import 替代 @use，Dart Sass 已弃用前者对 math 模块的支持。
calc() 里写 $var 为啥浏览器报错？
calc() 是运行时浏览器执行的，SCSS 只负责字符串替换。写 calc(100% - $sidebar-width) 会被原样输出，浏览器看到的是 calc(100% - $sidebar-width)，当然报错。
正确写法只有一种：用插值语法 #{$sidebar-width}，确保编译后变成纯 CSS 值：
code>$sidebar-width: 240px;
main {
width: calc(100% - #{$sidebar-width});
}
注意：
-
calc(100% - #{$w} * 2)❌ ——*在 calc 内部需空格，应写calc(100% - #{$w} * 2)→ 实际要calc(100% - (#{$w} * 2))才安全 -
calc(math.div(100%, 3))❌ ——math.div是编译期函数，不能塞进calc()里 - 涉及 CSS 变量（如
var(--col)）的运算，必须全部交给calc()，Sass 无法参与
round() 后还是出现 0.8749999999rem 怎么办？
这是浮点误差叠加的结果，不是精度设置没生效。Dart Sass 的 round() 对带单位值处理不稳定，中间剥离单位再拼回去的过程可能引入 IEEE 754 表示误差。
稳妥做法是：先除、再 round、最后拼单位，且全程避免单位参与运算：
- ✅
#{round(math.div(14px, 16px), 3)}rem→ 输出0.875rem - ❌
round(14px / 16px, 3)rem→ 单位参与除法，易触发上下文错误或浮点漂移 - ❌
round(14px, 3) / 16px→ 类型错乱，round()返回纯数字，不能再除以带单位值
如果项目用了 postcss-pxtorem，Sass 层就别转 rem——否则 px 先被 Sass 算成 rem，再被插件二次转换，结果翻倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
