推荐用带默认值的mixin统一管理行高：.line-height(@lh: 1.6) { line-height: @lh; }，调用时可传参或使用默认值；避免用font-size乘法推导行高，因不同文本类型需差异化比例；语义化mixin如.text-body()应按字号、行高、字重顺序设参并支持默认值；全局line-height重置应删除，改用mixin驱动所有文字节点。
Less中用.line-height()Mixin统一设置行高
直接写line-height: 1.6看似简单，但多个组件里重复写，后期改字体大小或行高比例时就得满项目搜。用Mixin封装后，所有文字块调用同一入口，改一处全更新。
推荐定义一个带默认值的Mixin：
.line-height(@lh: 1.6) {
line-height: @lh;
}
调用时：.line-height(1.5) 或 .line-height()（走默认）。注意别写成line-height: @lh;漏掉单位——Less里纯数字是无单位的，浏览器会按倍数解析，这是对的；但若传入24px，就得确保调用方传的是带单位值，Mixin内部不做强制转换单位，否则可能破坏设计系统一致性。
为什么不能只靠font-size推导line-height
很多人想“字体变了，行高自动跟着变”，于是写line-height: @font-size * 1.5。这在单个元素里可行，但实际排版中，标题、正文、小字注释的行高比例本就不同：标题常需紧凑（1.2），正文舒展（1.6），脚注紧凑又不能太挤（1.4）。硬绑定字体大小，反而让比例失控。
- 标题
font-size: 28px配line-height: 28px * 1.2 = 33.6px，视觉上没问题 - 但同页面的
font-size: 12px注释，12px * 1.2 = 14.4px，行距过小，可读性差 - 更麻烦的是，当某处用
rem动态缩放字体时，乘法计算会让line-height也缩放，而设计规范通常要求行高倍数稳定，不随缩放剧烈变化
.text-body()这类语义化Mixin怎么组织参数
比单纯.line-height()更进一步，把字号、行高、字重打包成语义层，比如.text-body()代表正文样式。关键点在于：参数顺序要符合直觉，且允许跳过中间项。
Less不支持命名参数，所以用「占位+默认值」来模拟：
.text-body(@fs: 16px, @lh: 1.6, @fw: 400) {
font-size: @fs;
line-height: @lh;
font-weight: @fw;
}
调用时：.text-body(18px, 1.5); 或 .text-body(14px);（后两个用默认）。切忌把@lh放第一位——没人会先想行高再想字号。另外，如果项目用rem，这里@fs建议传1rem而非16px，避免在根字体变化时行高计算脱节。
全局重置line-height和Mixin冲突怎么办
很多项目在html或body写了line-height: 1.5，结果Mixin设的1.6被层叠覆盖？不是优先级问题，是Less编译后CSS规则顺序决定的。如果重置写在引入Mixin文件之前，那Mixin生成的规则自然在后面，能覆盖；但如果重置写在后面（比如某些UI库的CSS最后加载），就会压倒你的Mixin。
稳妥做法是：删掉全局line-height重置，改用Mixin驱动所有文字节点。实在无法删除，就给Mixin加!important——但这说明排版控制权已分散，长期看是隐患。另一个信号是：当你发现某个<p></p>的行高没生效，检查computed styles里line-height是否显示为normal，那大概率是父级没设font-size，导致子级line-height倍数失去基准——这时候光调Mixin没用，得补上font-size上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
