SCSS函数不能直接返回带单位的字阶值，必须分离比例查表与单位转换；scale-font()仅返回无单位比例（如2），再通过px-to-rem($base-font-size * scale-font("h2"))生成2rem。
SCSS中不能用“查表法”直接返回带单位的字阶值，必须分离比例计算与单位转换——否则编译报错。 你写的 scale-font() 函数如果 @return 1.25rem，Sass 就会拒绝编译；它只接受无单位数值参与后续运算（比如乘以 $base-font-size）。所谓“优雅实现”，本质是把“查什么表”和“怎么转单位”拆成两步。
为什么 SCSS 自定义函数不能直接返回 rem/px 值？
因为 Sass 编译器在解析函数返回值时，会校验类型：若 @return 后跟了带单位的值（如 1.25rem 或 20px），它就无法参与后续的数学运算（比如 $font-size * 1.25rem 是非法的）。错误信息通常是：
Invalid CSS after "...turn 1.25rem": expected expression, was ";"
- SCSS 函数只能返回纯数字、颜色、布尔、列表或 map，不能返回“已带单位的长度值”作为最终输出
- 单位换算必须延迟到调用处完成，比如用
px-to-rem(20)或$base-font-size * scale-font("h2") - 查表逻辑本身可以放函数里，但表的内容必须是无单位比例（
1.5、1.25、0.875）
如何用 map + function 实现可维护的字阶查表？
推荐用 map 存比例，函数只做查找和校验，不碰单位：
#{$level}
- 查表用
map-get()，安全且支持嵌套 map（如按断点分层） - 务必加
@if not map-has-key()校验，避免编译失败 - 函数名保持语义清晰：
scale-font("h2")返回2，不是2rem
怎样配合单位转换实现真正可用的 CSS 字阶？
把比例查出来后，单位转换要单独封装，且必须支持灵活基线：
$base-font-size: 16px;
<p>@function px-to-rem($px) {
@return $px / $base-font-size * 1rem;
}</p><p>// 使用示例
h2 {
font-size: px-to-rem($base-font-size * scale-font("h2")); // → 2rem
}</p>
-
scale-font()只管比例，px-to-rem()只管单位，职责分明 - 若项目用
rem但根字体动态变化（如媒体查询切换html { font-size: 18px }），应改用em或直接写font-size: scale-font("h2")配合html { font-size: ... } - 别在函数里硬编码
16px，所有单位依赖都应来自变量或参数
最易被忽略的一点：查表法的“优雅”不在写法多炫，而在比例值是否可被设计系统验证——比如 "h2": 1.5 是否真等于 scale-font("h1") * 0.8。一旦比例失衡，再漂亮的函数也救不了视觉一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
