SCSS函数自动计算CSS行高，提升排版美感

先说结论。在 SCSS 里，想自动算出合适的行高值，最优雅的方式就是写一个函数：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)。CSS 是接受小数的，没必要用内置的 round() 函数去四舍五入。

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

你可能会问，直接用 line-height: 1.5 不是也挺好？没错，无单位值本身没问题。但当你需要精确对齐设计稿上的像素值（比如设计标注了“字号 14px，行高 20px”）、或者做垂直居中控制留白、又或者在响应式布局里想反推实际行高是多少时，硬编码一个倍数就会让你非常被动。

• 设计稿给的是像素，你每次都得手动算倍数。1.42857 和 1.429，输错一位就是灾难。
• 当你某处用 font-size: 1.125rem 时，你想知道它的实际行高到底是多少？还得再算一遍。
• 更关键的是，line-height 继承的是计算后的具体数值（比如 24px），而不是原始的倍数。所以当你需要局部调整时，逻辑很容易就断了。

函数和 CSS 变量怎么配合用

SCSS 函数负责编译期的静态推导，CSS 变量负责运行时的动态调节。两者各司其职，并不冲突。

• 函数用来生成初始值：比如 line-height: line-height(16px, 24px); 会被编译成 1.5。
• 如果你想实现用户拖动滑块来调节行高？那就别用 JavaScript 直接改 style.lineHeight 了。用 --line-height 这个 CSS 变量，配合 document.documentElement.style.setProperty() 去动态修改，这才是现代的工程解法。
• 还得提醒一句：别试图用这个函数去生成 calc() 表达式。像 height: calc(100vh - #{$header-height})，那是另一类需求，跟行高函数没关系。

话说回来，真正容易被忽略的点是：这个函数只解决“从像素反推倍数”这一件事。它无法改变字体度量带来的差异——同一个行高值，在不同字体、不同浏览器下，视觉高度可能差出 2 到 3 个像素。这是浏览器和字体引擎自身的限制，SCSS 对此无能为力。