如何在SCSS中使用函数自动计算CSS行高以提升排版美感？

SCSS行高函数应写为@function line-height($font-size, $target-height) { @return $target-height / $font-size; }，核心要求单位一致（如均用px），混用rem与px会导致编译报错；该函数用于精准反推无单位倍数，提升可维护性，但不解决字体渲染差异。

直接用 line-height($font-size, $target-height) 函数，比手算 20 / 14 = 1.42857 更准、更可维护；它只在编译期运行，不解决字体渲染差异，但能消除人为误差。

SCSS 行高函数怎么写才不出错

核心就一条：返回 $target-height / $font-size，但单位必须一致。常见错误是混用 rem 和 px，比如 line-height(1.5rem, 32px) —— Sass 编译器会报错。

• 最稳妥做法：统一用 px，如 $font-size: 14px、$target-height: 20px
• 要用 rem？先换算：假设根字号是 16px，那 1.5rem 就该写成 24px 再传入
• 别写成 @return round($target-height / $font-size, 3) —— round() 是 Sass 内置函数，但没必要四舍五入，CSS 接受小数

为什么不能直接用 line-height: 1.5

无单位值本身没问题，但当你需要对齐设计稿像素值（比如「字号 14px，行高 20px」）、做垂直居中留白控制、或响应式文本下反推实际行高时，硬编码倍数就会卡住。

• 设计给的是像素，你得手动算倍数，容易输错（1.42857 vs 1.429）
• 某处 font-size: 1.125rem，你想知道实际行高是多少？还得再算一遍
• line-height 继承的是计算后数值（如 24px），不是原始倍数，所以局部调整时逻辑易断裂

函数和 CSS 变量怎么配合用

SCSS 函数管编译期静态推导，CSS 变量管运行时动态调节——两者不冲突，但职责分明。

立即学习“前端免费学习笔记（深入）”；

• 函数用于生成初始值：line-height: line-height(16px, 24px); → 输出 1.5
• 想让用户滑动调节？用 --line-height 变量 + document.documentElement.style.setProperty()，别改 style.lineHeight
• 别试图用函数生成 calc() 表达式，比如 height: calc(100vh - #{$header-height}) 是另一类需求，和行高函数无关

真正容易被忽略的点：函数只解决“从像素反推倍数”，不解决字体度量差异——同一行高值在不同字体下视觉高度可能差 2–3px，这是浏览器和字体本身的限制，SCSS 做不了。