スタイルを組み合わせたSass/scss複数のミックスイン

Question

私はグラデーションの背景を設定する（後方互換性はありますが、そうではない）Sassミックスインがあります。さて、私は、複数のグラデーションを適用したい要素があります。コンマで区切ったリストでバックグラウンドプロパティを設定することでこれを直接行うことができますが、複数のグラデーションを適用してプロパティを共通の区切りリストとして出力するには、グラデーションmixinの複数のアプリケーションを使用できます。

私がやりたいものの例：（基本的に）この

div.needs-two-backgrounds { 
    background-image: linear-gradient(90deg, $color-one 0, $color-two 100%), 
        linear-gradient(180deg, $color-three 0, $color-four 20%, $color-five 100%); 
} 

を発するだろう

div.needs-two-backgrounds { 
    @include gradient-mixin(90deg, $color-one 0, $color-two 100%); 
    @include gradient-mixin(180deg, $color-three 0, $color-four 20%, $color-five 100%); 
} 

はサスに組み込まれ、これを行うにはいくつかの方法があります、またはそれは希望別のライブラリが必要ですか、それともその言語では不可能なのでしょうか？

編集： 回答ごとに解決策を作りましたが、それを分かち合うと思いました。その答えで提案されているかのように使用されて

@function linear-gradient-x($direction, $stops...) { 
    @return linear-gradient($direction, $stops); 
} 

@function prefixed-background-image-list-x($prefix, $images) { 
    $ret-val:(); 

    @each $image in $images { 
    $prefixed-image: #{$prefix}$image; 
    $ret-val: append($ret-val, $prefixed-image, 'comma'); 
    } 

    @return $ret-val; 
} 

@mixin background-image-x($backgrounds...) { 
    background-image: prefixed-background-image-list-x("-moz-", $backgrounds); 
    background-image: prefixed-background-image-list-x("-webkit-", $backgrounds); 
    background-image: prefixed-background-image-list-x("-o-", $backgrounds); 
    background-image: prefixed-background-image-list-x("ms-", $backgrounds); 
    background-image: prefixed-background-image-list-x("", $backgrounds); 
} 

：

div.needs-two-backgrounds { 
    @include background-image-x(
    linear-gradient-x(90deg, $color-one 0, $color-two 100%), 
    linear-gradient-x(180deg, $color-three 0, $color-four 20%, $color-five 100%) 
); 
} 

が、これは誰かに役立ちます願っています。

Answer 1

記載の方法ではできませんが、このようなもので可能です。

div.needs-two-backgrounds { 
    @include background-image(
     gradient(90deg, $color-one 0, $color-two 100%), 
     gradient(180deg, $color-three 0, $color-four 20%, $color-five 100%) 
    ); 
} 

あなたは、変数の引数をサポートしているミックスインbackground-imageを作成しなければならないでしょう - 3つの点に注意を払う：

@mixin background-image($images...) { 
    // do stuff here 
} 

gradient-mixinは、その後で/拡張によって置き換えられるべきですgradient機能。このすべてを行うことができますどのように良い出発点は、コンパスプロジェクトのbackground-imageミックスインです：

https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_images.scss#L97