線形勾配ミックスインを作成するタイプの問題：予想される色です。ガット：私は現在、SASSのミックスインのスリム化バージョンを利用しようとしている＃のd9d9d9 55％

Question

は線形グラデーションを実装することができますされ、ここで説明：https://www.sitepoint.com/building-linear-gradient-mixin-sass/

私のスリムバージョン：

// @param {Keyword | Angle} $direction - Linear gradient direction 
// @param {Arglist} $color-stops - List of color-stops composing the gradient 
@mixin linear-gradient($direction, $color-stops...) { 
    // Direction has been omitted and happens to be a color-stop 
    @if is-direction($direction) == false { 
    $color-stops: $direction, $color-stops; 
    $direction: 180deg; 
    } 

    background: nth(nth($color-stops, 1), 1); 
    background: linear-gradient($direction, $color-stops); 
} 
// Test if `$value` is a valid direction 
// @param {*} $value - Value to test 
// @return {Bool} 
@function is-direction($value) { 
    $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value); 
    $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value)); 

    @return $is-keyword or $is-angle; 
} 

を私はそれを利用する場合、そのよう：

@include linear-gradient(#ededed 54%, #d9d9d9 55%); 

私は、構文エラーを受けています：

Expected a color. Got: #ededed 54%

私はこの方法でそれを利用する場合、それは正常に動作します気づいたので

$color-stops: $direction, $color-stops; 

：

@include linear-gradient(to top, #fff 50%, #f0f0f0 51%); 

私はあることにそれを働いてきたと信じて、私は問題はこのラインであると信じて

タイプの問題ですが、それを修正する方法を把握していないようです。

Answer 1

私は解決策を考え出しました。

開始するには、私はすぐに追加することにより、$カラーストップの電流出力をテストした：これは、このコードものの走ったシナリオでは、その出力二つの異なるタイプとしての私の懸念を検証

&:after { 
    @each $color in $color-stops { 
     content: type_of($color); 
    } 
    } 

：

​​

また出力：

content: arglist; content: list;

最終的に、私はこれを解決するにはにがわかりました$ direction変数を追加する方法を変更します。

は変更：

$color-stops: $direction, $color-stops; 

へ：

$color-stops: append($color-stops, $direction); 

今、私のテストコード出力：

content: list; content: list;

そして長くないエラーが出ます。