scss的line-height()函数本质是单位必须一致的除法运算，返回无单位倍数；需统一单位、避免混用，响应式场景应改用无单位值，精度宜用round()控制，且行高不等于垂直居中万能解。
line-height() 函数必须保证单位一致才能编译通过
SCSS 的 line-height() 函数本质是除法运算：@return $target-height / $font-size，所以两个参数单位必须可比。写成 line-height(14px, 20px) 没问题，但 line-height(1.125rem, 20px) 会直接报错 Incompatible units: "rem" and "px"。
常见错误包括：
- 漏写单位，比如
line-height(14, 20)→ Sass 报"Incompatible units px and " - 混用单位后强行计算，如
line-height(1rem, 20px)→ 编译失败 - 误以为函数返回带单位的值，写成
line-height: line-height(14px, 20px) + px→ 语法错误（函数返回纯数字）
最稳妥的做法是统一用 px：设计稿给的是「字号 16px、行高 24px」，就直接传 line-height(16px, 24px)；若要用 rem，先换算好——根字号 16px 时，1.5rem = 24px，再代入。
响应式字体下别指望函数自动适配
line-height() 是编译期函数，不感知运行时变化。当 font-size 用 clamp(1rem, 2.5vw, 1.5rem) 或媒体查询切换时，函数无法动态重算。
正确分层处理方式：
- 固定字号场景（按钮、标题、标签）→ 直接用
line-height($size, $target)生成确定倍数 - 响应式正文（
p、article）→ 放弃函数，改用无单位值如line-height: 1.6，靠浏览器自然缩放 - 若真需像素级对齐（比如和设计稿某处间距严格一致），优先在固定断点内定义变量，而非强塞函数
line-height 值不是越精确越好
函数返回 20px / 14px = 1.4285714286，Sass 默认保留 5 位小数（1.42857）。但 CSS 不需要这种精度——浏览器渲染受字体 hinting、子像素对齐等影响，多两位小数毫无意义，反而增加维护负担。
建议加一层 round() 控制：
@function line-height($font-size, $target-height) {
@return round($target-height / $font-size * 1000) / 1000;
}
这样 20px / 14px 输出 1.429，够用且可读。
别把 line-height 当垂直居中万能解
很多人用 line-height: 80px 配合 height: 80px 实现单行居中，这仅在**纯文本、无 inline 元素、无 padding 干扰**时可靠。一旦插入 <span></span>、图标或设置 padding，行框行为就变得不可控。
更健壮的做法：
- 块级居中优先用
display: flex; align-items: center - 行内居中确认父容器
font-size和line-height关系，避免依赖“刚好填满”的巧合 - 特别注意：行高小于字号时（如
font-size: 16px; line-height: 12px），行框会压缩，文字可能被裁切——这不是 bug，是规范行为
真正容易被忽略的，是行高背后那套渲染模型：它控制的不是“字到字的距离”，而是基线到基线的间隔。设计稿标的是“字顶到字底”，你得自己换算，函数只负责算出那个倍数，不替你理解排版逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
