37

単純なCSS3線形グラデーションを処理するためのこのミックスインがあります。

@mixin linear-gradient($from, $to, $dir: bottom, $dir-webkit: top, $ie-filters: false) {
    background-color: $to;
    background-image: -webkit-linear-gradient($dir-webkit, $from, $to);
    background-image: linear-gradient(to $dir, $from, $to);
    @if $ie-filters == true and $old-ie {
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($from)}', endColorstr='#{ie-hex-str($to)}');
    }
}

$dir'direction'の略です。

$ie-filters'true'にする必要があり、/$dirデフォルト$dir-webkit値を変更する必要がない場合でも、それらを再宣言する必要がありますが、これは明らかにあまり乾燥しておらず、最適ではないため、次のようにする必要があります。

@include linear-gradient(#7a7a7a, #1a1a1a, bottom, top, true);

私がこれをしたいとき：

@include linear-gradient(#7a7a7a, #1a1a1a, true);

ミックスインを呼び出すときに、この方法で引数をスキップするにはどうすればよいですか？

$dir-webkitPSまだ新しいグラデーション構文を処理していないため、Webkitの引数について疑問がある場合は（ http://generatedcontent.org/post/37949105556/updateyourcss3- >新しいグラデーション構文を参照）、方向は次のようになります。標準の構文の反対になります。

4

1 に答える 1

62

SASS 3.1以降、名前付き引数を渡してそれを行うことができます。

@include linear-gradient($from: #7a7a7a, $to: #1a1a1a, $ie-filters: true);

残りはデフォルトになります。

于 2013-01-21T11:01:07.523 に答える