2013-01-21 8 views
26

私は、単純な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は「方向」の略です。

私は$ie-filters「真」にする必要があると私は、私はまだ明らかに非常に乾燥して最適ではないであるそれらを再宣言する必要があるので、私がしなければならないと思います$dir/$dir-webkitデフォルト値を変更する必要がない場合この:

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

私はスキップするにはどうすればよいの引数私:私はちょうどこれをしたい

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

mixinを呼び出すと、このようになりますか?

PSあなたは、それはまだ(参照:http://generatedcontent.org/post/37949105556/updateyourcss3 - >新勾配構文を)新しいグラデーション構文に対応していないとして、それはWebkitのためだ$dir-webkit引数に疑問を抱いている場合は、方向が反対であることが必要標準構文。 SASS 3.1から始まっ

+0

nullを渡してみましたか? – markus

+0

'null'が使われても値は出力されません:' @include linear-gradient(#f60、#c00、null、null、true); 'コンパイルする:' background-image:-webkit - 直線勾配(、#ff6600、#cc0000);背景画像:直線勾配(〜、#ff6600、#cc0000); ' –

+0

これを試してくださいhttp://bravedick.github.com/mooxins/ mixins。いいえ、フィルター、btw。 – bravedick

答えて

44

あなたはそれを行うには名前付き引数を渡すことができます。

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

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

+0

'$ from'と' $ to'はデフォルトを持つことはありませんが、それでも、私が上で説明したように引数をスキップしたいときには役に立ちません。 –

+1

何ですか?私はちょうどそれがどのように動作するかを示しました、まさにあなたが尋ねたものでした。あなたは3番目と4番目の引数をスキップしたいと思います。 – markus

+4

あなたは私の答えを理解していないかもしれません。これはあなたの値でmixinを呼び出す方法です。名前付き引数を渡す限り、他​​の2つのパラメータは省略できます。 – markus

関連する問題