1

私はSassを始めたばかりなので、我慢してください。

px私はこのミックスインを使用して、 （古いIEの場合）フォントサイズの宣言と最新のブラウザーの両方でフォントサイズの宣言を処理しremます。これも優れたline-height計算を行います。

@mixin font-size($font-size, $line-height-val: "", $sledge-hammer: "" /* $sledge-hammer is    for an optional `!important` keyword */) {
    font-size: ($font-size)+px#{$sledge-hammer};
    font-size: ($font-size / $base-font-size)+rem#{$sledge-hammer};
    @if $line-height-val == "" {
          line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    } @else {
          line-height: #{$line-height-val};
    }
}

$line-height-valそれは機能しますが、オプションの引数（および$sledge-hammer）はそれを行うための最適な方法ではないように感じます。一部のヘルパークラスでキーワードを宣言する必要があるため$line-height-val、を手動で宣言する必要がある場合があるためline-height、が必要です。$sledge-hammer!important

90％の時間、私は次のようにミックスインを使用しています。

@include font-size(24);

どちらもコンパイルします：

font-size: 24px;
font-size: 1.5rem;
line-height: 1.1;

オーバーライドする必要がある場合は、次のline-heightようにします。

@include font-size(24, 1.6);

どちらもコンパイルします：

font-size: 24px;
font-size: 1.5rem;
line-height: 1.6;

!importantしかし、キーワードを宣言する必要がある場合は、次のようにする必要があります。

@include font-size($font-size-sml, "", !important);

どちらもコンパイルします：

font-size: 15px!important;
font-size: 0.9375rem!important;
line-height: 1.6;

""しかし、私は2番目の引数に空を使用する必要があり、3番目の引数の値は常にミックスインに含まれるようになるので、おかしいと感じ!importantますか？

このミックスインを書くもっときれいな方法があるのだろうか？

4

1 に答える 1

1

次のように呼び出すときにパラメーターを指定できます。

@include font-size($font-size-sml, $sledgehammer: !important);

次のように mixin 引数を短縮できます。

@mixin font-size($font-size, $line-height-val: "", $i: false /* flag for`!important` */) {
    $important: if($i, "!important", "");
    font-size: ($font-size)+px #{$important};
    font-size: ($font-size / $base-font-size)+rem #{$important};
    @if $line-height-val == "" {
          line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    } @else {
          line-height: #{$line-height-val};
    }
}
于 2013-01-08T13:07:53.383 に答える