math.div()是计算行高的唯一稳妥解法，避免sass除法歧义；应基于1rem而非固定px计算以实现响应式；line-height须用无单位数值；字体度量差异需手动微调+0.05~0.15并眼验实际效果。
行高计算总出错？math.div()比除号更安全
用 / 直接算行高（比如 1.5 / 16px）会触发 Sass 的“除法歧义警告”，甚至编译失败——Sass 旧版本把 / 当作分隔符而非运算符。改用 math.div() 是唯一稳妥解法。
-
math.div(24px, 16px)返回1.5（纯数字，可直接赋给line-height） - 别写
24px / 16px，即使看起来对，也可能被解析成列表 - Sass 1.33+ 要求显式导入：
@use "sass:math"，漏掉就报Undefined function math.div()
字号和行高联动时，rem 基准不能硬编码
很多人把根字号写死成 16px，再用 math.div(24px, 16px) 算行高，结果用户调大系统字号后行高失真。真正响应式的做法是让计算基于 1rem。
- 用
math.div(24px, 1rem)得到的是相对值（如1.5），它会随html的font-size缩放 - 确保根元素设置了弹性字号：
html { font-size: clamp(14px, 1rem, 18px); } - 避免用
px除以px得纯数再乘rem，多此一举还易错
line-height 设为无单位数值，不是 px 或 em
CSS 的 line-height 接受无单位数值（如 1.5），这才是继承时真正可靠的写法。一旦写成 24px 或 1.5em，子元素计算就会偏离预期。
- 从
math.div()拿到的结果直接赋值：line-height: math.div(24px, 1rem); - 别转成
#{math.div(24px, 1rem)}em——这等于套了两层相对计算，结果翻倍 - 浏览器渲染时，无单位值会以当前元素的
font-size为基准重算行高，这才是设计本意
字体度量差异会让 math.div() 结果“看着矮”
按字高（cap height、x-height）算出来的理论行高，常比实际视觉需要小。比如 math.div(20px, 16px) = 1.25，但多数中文字体在 16px 下需要至少 1.35 才不显挤。
- 别迷信数学精确：字体渲染有内建空白（leading）、字形下沉（descender）等不可见空间
- 建议先用
math.div()得基础值，再手动微调 +0.05 ~ +0.15，比如math.div(20px, 16px) + 0.1 - 检查真实场景：打开 DevTools，选中文字元素，看 computed
line-height和实际行间距是否匹配
行高不是纯数学题，它卡在字体度量、浏览器渲染、可读性三者的交界上。算得再准，不眼验一次，就等于没做完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
