1

私はこの非常に単純な Sass 関数を持っています:

@function to-rem($pxval) {
    @return #{$pxval / $base-font-size}rem;
}

値に変換$pxvalするものrem

margin-top: to-rem(24);

出力:

margin-top: 1.5rem;

IE 8（古いIE）以下はサポートしていないremため、このような状況を処理するために、古いIEのみのスタイルシートにスタイルをtrueに出力する古いIEのフラグがあります。 :

@function to-rem($pxval) {
    @if $old-ie {
        @return #{$pxval}px;
    } @else {
        @return #{$pxval / $base-font-size}rem;
    }
}

しかし、私はレスポンシブ サイトを扱っているため、サポートしていない Opera Mini をサポートする必要がありrem、古い IE のように Opera Mini をフィルタリングする方法はありません。

ミックスインを使用せずにこれを行う方法はありますか? まったく同じことを行うミックスインがありますが、それを使用して複数の値を宣言し、複数のプロパティを処理できます。

@include to-rem(box-shadow, (inset 0 0 0 1 #2a9022) (inset 0 0 3 #459966));
@include to-rem(width height, 125);

単一の値の関数が好きです。たとえば、書くのが簡単だからです

padding: to-rem($spacing-base) 0;

これと比較して：

@include to-rem(padding, $spacing-base 0);
4

1 に答える 1

0

あなたはすでに答えを持っています: mixin を使用してください。どの言語でも 2 つの値を返す唯一の方法は、リスト (または配列) を返すことです。

@function to-rem($pxval) {
    @return $pxval * 1px,  $pxval / $base-font-size * 1rem;
}

.test {
    $sizes: to-rem(24);
    margin: nth($sizes, 1);
    margin: nth($sizes, 2);
}

ここでは明らかにミックスインが勝っています。

于 2013-02-13T13:14:43.733 に答える