SCSS mixinまたは関数を使用して色または勾配を区別する

Question

SCSSを使用して、パラメータを受け取るmixinを作成し、色または勾配のいずれかを決定し、それに応じてbackgroundプロパティを作成します。

• 任意の色値（#hex、RGBA、色...）：可能なパラメータの入力として

  。

• 任意の色SCSS機能（rgba(color, 0.1),...）です。
• 勾配列（ "トップ、RGBA（30,87,153,1）0％、RGBA（125,185,232,1）100％"）

擬似コード：

if color or SCSS color function 
    then background: color; 
if gradient 
    then background: -webkit-linear-gradient(gradient); 
     background: linear-gradient(gradient); 
     background: -moz-linear-gradient(gradient); 

Iコンパスやその他のSASSライブラリを使用したくない。

Answer 1

注：私はベンダー接頭辞を実行するためのサスまたは少ないミックスインを使用することはお勧めしません。古い勾配構文と新しい勾配構文が同じではないため、勾配に対してもっとそうです。プレフィックスフリーや自動接頭辞などの小さなライブラリにこれらの種類のものを残しておく方が良いです。

質問に答えるには、はい、色（またはカラー関数の出力）と文字列using the type_of function。

以下は、必要なことを行うスニペットです。私はそれが自明であると感じているので、何の説明も加えなかった。コードの一部が複雑であることがわかったら、私にコメントを残して、もっと説明します。

@mixin bg($value){ 
    @if type_of($value) == 'color' { 
    background: $value; 
    } 
    @else if type_of($value) == 'string' { 
    background: -webkit-linear-gradient(#{$value}); 
    background: -moz-linear-gradient(#{$value}); 
    background: linear-gradient(#{$value}); 
    } 
    @else { 
    @error "Invalid parameter. Mixin expects a color or color function or gradient as value. "; 
    } 
} 

#demo.color { 
    @include bg(red); 
} 
#demo.gradient { 
    @include bg('top, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%'); 
} 
#demo.color-rgba { 
    @include bg(rgba(127, 127, 127, 0.1)); 
} 
#demo.color-rgba-sass { 
    @include bg(rgba(red, 0.1)); 
} 
#demo.color-hex { 
    @include bg(#0f0); 
} 
#demo.color-function { 
    @include bg(darken(red, 15%)); 
} 
/* #demo.invalid-value { if this is uncommented, you'd get the error 
    @include bg(1); 
}*/ 

CodePen Demo