css - 线高的 LESS Mixin

Question

我正在使用这个 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倍我字体大小的行高，而不需要输入一个值？

Answer 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;