SCSS字阶函数必须返回无单位数值，否则编译报错；应分离比例计算与单位转换，用scale-font()处理响应式字阶，px-to-rem()单独负责单位换算，确保可维护性与视觉一致性。
SCSS字阶函数必须返回无单位数值，否则编译报错
SCSS自定义函数用于生成字体缩放比例（如 1.25、1.5），不能直接返回带单位的值（如 20px 或 1.25rem）。一旦 @return 后面跟了单位，Sass 编译器会拒绝处理——它只接受纯数字或可计算的长度值参与后续运算。
常见错误写法：@return 1.25rem 或 @return $base * 1.25 + "rem"，都会触发 Invalid CSS after "...": expected expression 类错误。
- 正确做法：所有输入参数统一为无单位数值（如
$ratio: 1.25），或先用unitless()剥离单位再运算 - 若需基于像素基准推导，应传入
$base: 16（纯数字），而非16px - 函数内部避免拼接字符串单位，CSS 单位应在调用处显式添加（如
font-size: #{$value}rem）
用 scale-font() 实现等比字阶链，支持断点插值
真正实用的字阶函数不是简单乘法，而是能对接设计系统中“小/中/大标题”语义，并在不同断点间平滑过渡。推荐封装一个接受最小/最大字号与断点的函数：
@function scale-font($base: 16, $ratio: 1.25, $min-breakpoint: 320px, $max-breakpoint: 1200px) {
$min-size: $base;
$max-size: $base * pow($ratio, 4); // 按 4 级字阶推到 h1
$slope: ($max-size - $min-size) / ($max-breakpoint - $min-breakpoint);
$intercept: $min-size - $slope * $min-breakpoint;
@return clamp(#{$min-size}px, #{$intercept} + #{$slope} * 1vw, #{$max-size}px);
}
调用时：font-size: scale-font(18, 1.125, 375px, 1440px); → 输出 clamp(18px, 12.333px + 0.0139vw, 25.312px)
-
pow()是 Sass 内置函数，用于指数增长（如字阶按黄金比例递进） - 所有单位剥离后参与数学运算，最后用字符串插值拼回
px，确保clamp()接收合法参数 - 避免在函数内硬编码
rem，否则根字体变化时无法联动响应
别把字阶函数和 px-to-rem() 混在一起用
很多开发者试图在一个函数里同时做「比例缩放」和「单位转换」，比如 @function font-scale-rem($base, $ratio) { @return ($base * $ratio) / 16 * 1rem; }。这看似省事，实则埋下三重隐患：
- 函数输出依赖固定根字号（
16px），一旦项目改用10px或动态根字体，所有调用全失效 - 返回值是带单位的
rem，无法再参与clamp()或calc()运算 - 字阶逻辑（比例）和单位逻辑（rem 转换）耦合，违反单一职责，后期想切 vw 或百分比时得重写全部函数
更合理分工：scale-font() 只管比例与响应范围，px-to-rem() 单独封装单位转换，两者通过变量桥接，不嵌套调用。
真正容易被忽略的点：字阶视觉一致性不靠函数保证
SCSS 函数能精准输出 1.25 或 clamp(16px, ...)，但它无法解决字体度量差异——同一 font-size: 1.25rem 在 Inter 和 Noto Serif 下，实际行内框高度可能差 2–3px；浏览器对小字号的 subpixel 渲染也会导致视觉错位。
这意味着：即使函数算得再准，排版对齐仍要靠 line-height 微调、vertical-align 补偿，或借助 text-top/text-bottom 等语义对齐方式。函数只是帮你甩掉手算误差，不是排版问题的终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
