不能直接用 px 除以 16 得到 rem，因为 sass 严格校验单位，16px / 16 会报错“incompatible units px and unitless”；必须用 strip-units() 提取数值再计算，并乘以 1rem。
为什么不能直接用 px 除以 16 得到 rem
因为 Sass 的单位计算不是纯数值运算——16px / 16 会报错：Incompatible units px and unitless。Sass 严格校验单位，不允许带单位值与无单位数直接参与算术运算。必须显式剥离单位或统一单位后处理。
用 strip-units() 提取纯数值再计算
这是最常用、最安全的方案：先用内置函数 strip-units() 拿到数字部分，再除以根字体大小（如 16px），最后手动拼上 rem 单位。
@function px-to-rem($px) {
$base-font-size: 16px;
@return strip-units($px) / strip-units($base-font-size) * 1rem;
}
<p>.example {
font-size: px-to-rem(24px); // → 1.5rem
padding: px-to-rem(8px) px-to-rem(16px); // → 0.5rem 1rem
}</p>
-
strip-units($px)返回不带单位的数字（如24px → 24） - 务必确保
$base-font-size是带单位的值（如16px），否则strip-units()后除法结果会失准 - 不能写成
strip-units($px) / 16rem—— 这样会把1rem当作乘数，导致单位错误
用 math.div() 替代 / 避免旧版 Sass 报错
Sass 1.33+ 推荐用 math.div() 替代斜杠除法，尤其在启用 module-system 或使用 @use 规则时，能规避某些单位推导歧义。
@use "sass:math";
<p>@function px-to-rem($px) {
$base: 16px;
@return math.div(strip-units($px), strip-units($base)) * 1rem;
}</p>
- 旧版 Sass（
@import方式）中/在某些上下文会被当作 CSS 除法（如font: 12px/24px），math.div()更明确 - 如果项目仍在用
@import且未升级，保持用/即可，但需确保表达式不在可能被解析为 CSS 除法的位置
注意 rem 基准是否动态（比如响应式根字体）
函数返回的是静态计算值，不会随 html 元素的 font-size 变化而重算。如果用了媒体查询动态改根字号（如 html { font-size: clamp(14px, 2.5vw, 18px); }），那 px-to-rem() 生成的 rem 值仍基于你写死的 $base-font-size（比如 16px），实际渲染效果会偏差。
- 函数只解决「编译时单位换算」，不替代运行时逻辑
- 若需真正响应式缩放，应优先用
em、vmin或 CSS 自定义属性 +calc()，而非依赖固定rem换算 - 多人协作时，建议把
$base-font-size抽成变量并文档化，避免有人误改却没同步更新函数
实际用的时候，最容易漏掉的是 strip-units() 和单位拼接的顺序——少一个 * 1rem，结果就是纯数字，CSS 直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
