用于行高的 LESS Mixin答案

【问题标题】：LESS Mixin for Line-height用于行高的 LESS Mixin
【发布时间】：2021-12-03 03:45:40
【问题描述】：

我正在使用这个 mixin 来生成具有后备像素大小的 rem 字体大小，但也生成一个 1.5 倍于字体大小的行高。

.font(@size: 16px, @line: @size) {
@remfont: (@size / 10);
@remline: (@size / 10) * 1.5;
font-size: @size * 1px;
font-size: ~"@{remfont}rem";
line-height: @size * 1.5px;
line-height: ~"@{remline}rem";
}

不利的是，它要求我为我的行高输入一个值，尽管编译后不需要它。我使用这个 mixin 的 LESS 是这样的：

.font (13, 10);

并导致此输出：

font-size: 13px;
font-size: 1.3rem;
line-height: 19.5px;
line-height: 1.9500000000000002rem;

有没有办法重新设计这个 mixin，让它输出一个 1.5 倍我字体大小的行高，而无需输入值？

【问题讨论】：

看起来 mixin 已经完成了您的要求。 @line 参数实际上并未使用。
line-height:1.5;（无单位）将使行高为字体大小的 1.5 倍。无需计算任何东西。
问题不在于输出。问题是要求我自己或其他任何人输入 line-height 的值，尽管它实际上并没有使用。而不是.font (13, 10);，最好使用.font(13);，结果是字体大小和行高。
您不能将一个参数用作另一个参数的默认值，这就是您必须同时传递两个值的原因。但正如@freejosh 指出的那样，@line 实际上并没有在 mixin 中使用，所以只需将其删除并传递字体大小。

标签： css less

【解决方案1】：

找到了解决办法。目前看来，使用 @string 值不需要比单数更多的值。混音：

.font(@string) {
@remfont: (@string / 10);
@remline: (@string / 10) * 1.5;
font-size: @string * 1px;
font-size: ~"@{remfont}em";
line-height: @string * 1.5px;
line-height: ~"@{remline}em";
}

样式表用法：

.font (14);

输出：

font-size: 14px;
font-size: 1.4em;
line-height: 21px;
line-height: 2.0999999999999996em;

【讨论】：