首先给出结论。在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对此无能为力。
