如何在SCSS中自动计算行高Line-height_基于字体大小比例函数-css教程-PHP中文网

SCSS 中应使用 line-height($font-size, $target-height) 函数精确计算无单位行高倍数，避免手动估算误差；需确保两参数单位一致，响应式文本优先用无单位值，函数仅编译期执行且不解决字体渲染差异。

如何在scss中自动计算行高line-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，返回对应无单位倍数。这样既保留了无单位值的继承优势，又从像素需求出发反向可控。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@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...（注意单位混合！）
}</p>

⚠️ 注意：$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 都单独算一次，不如提取成变量复用。