Тип выпуска линейного градиента: ожидается цвет. Получили: # d9d9d9 55%

Question

В настоящее время я пытаюсь использовать облегченную вниз версию Mixin SASS, описанный здесь, который помогает реализовать линейно-градиенты: 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); 
    } 
    } 

Это подтвердило мое беспокойство, как она выводила двух различных типов, в сценарии, что он бежал, хотя этот код:

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

это выход:

content: arglist; content: list;

в конце концов, я нашел решение этой проблемы было измените способ добавления переменной $ direction.

Изменено:

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

To:

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

Теперь мой тестовый выход код:

content: list; content: list;

И не больше ошибок снаружи.