1

この mixin を使用して、代替ピクセル サイズで rem font-size を生成していますが、font-size の 1.5 倍の line-height も生成しています。

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

値を入力しなくても、フォント サイズの 1.5 倍の行の高さを出力するように、この mixin を作り直す方法はありますか?

4

1 に答える 1

2

解決策を見つけました。今のところ、@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;
于 2013-02-07T20:05:39.847 に答える