선형 그라데이션 믹싱을 만드는 형식 문제 : 예상되는 색입니다. 있어 : #의 d9d9d9 선형 그라데이션을 구현하는 데 도움이 내가 현재 SASS 믹스 인의 몸매는 여전 하구나 버전을 활용하기 위해 노력하고있어

Question

는 여기에 설명 된 55 % : 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%

을 16,

나는 문제가이 줄을 믿습니다 :

$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; 

에 :

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

지금 내 테스트 코드 출력 :

content: list; content: list;

그리고 길지 않은 오류 아웃.