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 做不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
