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对此无能为力。