css - ミックスインのアドバイスが少ない

Question

フォントサイズと行の高さのミックスインを少なくしようとしていますが、実行しようとするとエラーが発生します。誰かが私がこれでどこで間違っているかもしれないかアドバイスできますか？

.font( @size: 1.6, @line: @size * 1.5 ){
  @fontSizeRem: @size;
  @fontSizePx: ( @size * 10 );
  @lineHeightRem: @line;
  @lineHeightPx: ( @line * 10 );
  font-size: ~"@{fontSizePx}px";
  font-size: ~"@{fontSizeRem}rem";
  line-height: ~"@{lineHeightPx}px";
  line-height: ~"@{lineHeightRem}rem";
}

h1{
 .font(1.6);
}

Answer 1

LESSは、他のパラメーターに依存するパラメーターをサポートしていません。オプションの2番目の引数を実装するには、別のミックスインを追加します。

.font( @size:1.6 ) {
  .font(@size, @size * 1.5)
}
.font( @size, @line ) {
    /* ... See question for the remainder ... */

コンパイル先：

h1 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24.000000000000004px;
  line-height: 2.4000000000000004rem;
}