不能直接用 px 除以 rem 得到换算值，因为 sass 编译期禁止跨单位相除，px 和 rem 属不同维度，需通过基准值（如 $base: 16px）归一化后转换，如 ($value / $base) * 1rem。
为什么不能直接用 px 除以 rem 得到换算值？
Sass 编译期做单位运算时，px 和 rem 是不同维度的单位，直接写 16px / 1rem 会报错：Invalid CSS after "16px /": expected expression (e.g. 1px, bold), was "1rem"。Sass 不允许跨单位相除（除非一方是无单位数值），更不会自动帮你做基准换算。
真正要做的，不是“转换单位”，而是“把带单位的值，按指定基准映射为无单位比例，再套上目标单位”。比如把 16px 转成 1rem，本质是：假设根字体大小为 16px，那么 16px == 1rem，所以换算系数是 16px / 16px == 1，再乘以 1rem 单位——但这个“16px”必须显式传入或配置。
- 所有单位转换函数都依赖一个明确的基准值（如
$base-font-size: 16px） - 函数输入应接受带单位的值（如
24px），而非纯数字，否则无法判断原始量纲 - 输出单位由函数语义决定（
px-to-rem输出rem，rem-to-em输出em），不自动推导
px-to-rem 函数怎么写才不踩坑？
常见错误是写成 @function px-to-rem($px) { @return $px / 16px * 1rem; }——这看似简洁，但硬编码 16px 会让整个项目失去灵活性；更糟的是，如果传入 2em 这种非 px 单位，编译直接失败，毫无提示。
正确做法是先校验输入单位，再做归一化处理：
@function px-to-rem($value) {
@if unit($value) != 'px' {
@error 'px-to-rem() expects a value in px, got #{unit($value)}';
}
$base: 16px;
@return ($value / $base) * 1rem;
}
- 用
unit($value)检查输入单位，比字符串匹配更可靠 - 不要用
16这样的纯数字除，必须带px单位，否则24px / 16结果仍是24px/16（未归一化） - 如果项目根字号动态变化（如响应式切换），把
$base提到变量文件里统一维护，别散落在各函数中
如何让 rem 转 px 也支持缩放因子？
单纯反向计算（$rem * 16px）在高倍屏或 zoom 场景下不够用。比如设计稿按 2x 出图，你希望 1rem 在设备上渲染为 32px，就得引入缩放系数。
推荐加一个可选参数 $scale，默认为 1：
@function rem-to-px($value, $scale: 1) {
@if unit($value) != 'rem' {
@error 'rem-to-px() expects a value in rem, got #{unit($value)}';
}
$base: 16px;
@return ($value * $base) * $scale;
}
-
$scale: 2时，rem-to-px(1rem, 2)返回32px，适合 DPR=2 的屏幕 - 注意返回值单位是
px，不是px * 2—— Sass 会自动合并单位，1rem * 16px * 2→32px - 不要试图在函数里读取
window.devicePixelRatio，那是运行时 JS 的事，Sass 只负责编译期静态计算
多个单位混用时，strip-unit 辅助函数真有必要吗？
有些场景需要剥离单位做纯数值运算（比如计算行高比例、透明度倍数），这时 strip-unit 很有用，但它不是万能解药。
典型写法：
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
原理是利用单位相除归零的特性：24px / (24px * 0 + 1) → 24px / 1 → 24（无单位）。但要注意：
- 仅适用于单一单位值，
strip-unit(1em + 2px)会报错，因为表达式结果无法被单位整除 - 别在
px-to-rem里先strip-unit再手动加rem，这绕过了 Sass 的单位安全检查，容易埋下隐式错误 - 真正需要剥离单位的地方，往往是做比例计算（如
line-height: strip-unit(24px) / strip-unit(16px)），而不是单位转换本身
单位转换的核心不是“去掉单位”，而是“理解单位背后的物理意义和参照系”。写函数时，每一步运算都要清楚：此刻的值代表什么，它的单位是否合理，基准是否一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
