SCSS 中应使用 line-height($font-size, $target-height) 函数精确计算无单位行高倍数，避免手动估算误差；需确保两参数单位一致，响应式文本优先用无单位值，函数仅编译期执行且不解决字体渲染差异。
line-height 不该靠人眼估，尤其在 SCSS 项目里反复调 1.4、1.6 还要手动算像素值——直接写函数生成更稳。
为什么不能直接用 line-height: 1.5 就完事？
无单位数值本身没问题，但当你需要「根据字体大小动态推导上/下留白」「做垂直居中对齐」「或和设计稿的精确像素间距对齐」时，硬编码倍数就不够用了。比如设计给的是「字号 14px，行高 20px」，你得反推 20 / 14 = 1.42857...，手输容易错，也不方便复用。
更麻烦的是：如果某处 font-size 是 rem 或响应式变化（如 1.125rem），倍数虽能继承，但你想确认某子元素实际行高是多少，还得手动算一遍。
这时候，SCSS 函数不是炫技，是减少出错环节。
立即学习“前端免费学习笔记（深入）”；
SCSS 中怎么写一个靠谱的 line-height 计算函数？
核心逻辑就一条：给定 $font-size 和目标 $line-height-px，返回对应无单位倍数。这样既保留了无单位值的继承优势，又从像素需求出发反向可控。
@function line-height($font-size, $target-height) {
@return $target-height / $font-size;
}
用法示例：
p {
font-size: 14px;
line-height: line-height(14px, 20px); // → 1.42857...
}
<p>h2 {
font-size: 1.5rem;
line-height: line-height(1.5rem, 32px); // → 21.333...（注意单位混合！）
}
⚠️ 注意：$font-size 和 $target-height 必须同单位（都用 px 最安全），否则 Sass 编译报错。如果要用 rem，统一转成 px 再算，比如假设根字号是 16px，那 1.5rem = 24px。
常见错误现象：
- 写
line-height(14px, 20)（漏单位）→ Sass 报"Incompatible units px and " (no unit) - 写
line-height(1.25rem, 20px)→ 单位不匹配，编译失败 - 把函数结果直接当像素用，比如
line-height: line-height(14px, 20px) + px→ 语法错误，函数返回的就是纯数字
如何让这个函数支持响应式字体？
响应式场景下，font-size 可能是 clamp() 或媒体查询切换值，函数本身无法运行时计算。所以别指望它“自动适配”，而是分层处理：
- 对固定字号模块（如按钮文字、卡片标题），直接用函数生成确定倍数
- 对响应式文本（如正文
p），优先用无单位值（如line-height: 1.6），靠浏览器自然缩放——这才是语义正确的做法 - 若必须像素对齐（如和 SVG 图标垂直居中），用
calc()替代函数：line-height: calc((20px / 14px) * 1em)，但注意兼容性（IE 不支持）
性能影响几乎为零：Sass 函数在编译期执行，不增加运行时开销。但滥用会导致 CSS 输出冗余，比如每个 font-size 都单独算一次，不如提取成变量复用。
容易被忽略的兼容性和字体特性问题
函数只解决「计算」，不解决「渲染」。同一个 line-height: 1.5，在思源黑体和宋体下视觉行距可能差 2–3px，因为字体自身的 ascender/descender 高度不同。这不是 bug，是字体设计事实。
所以函数产出的值，建议始终配合真实字体预览验证，而不是只看数字是否“整除”。尤其当项目引入了自定义字体（如 @font-face 加载的苹方或 SF Pro），最好在 font-display: swap 生效后检查最终渲染效果。
另外，line-height: normal 在不同浏览器中计算值差异较大（Chrome 约 1.15，Firefox 可能到 1.25），如果你依赖这个默认值做对齐，函数反而帮不上忙——这种场景更适合用 display: flex 或 grid 布局替代行高控制。
