类型问题，使线性梯度混合:预期的颜色。Got：#d9d9d9 55%

Question

我目前正在尝试利用这里描述的SASS mixin的精简版本，它帮助实现线性梯度：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%);

我收到一个语法错误：

希望有颜色。Got：#ededed 54%

我相信问题在于这句话：

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

因为当我以这种方式使用它时，我注意到它很好：

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

我相信我已经解决了一个类型的问题，但似乎无法解决它。

Answer 1

我想我想出了解决办法。

首先，我通过添加以下内容，快速测试了当前的$color-stops输出：

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

这证实了我的担忧，因为它输出了两种不同的类型，在它通过以下代码运行的场景中：

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

信息技术产出：

内容:议论文；内容:清单；

最终，我找到了解决这个问题的方法，那就是改变我附加$direction变量的方式。

更改：

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

至：

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

现在我的测试代码输出：

内容:列表；内容:列表；

不再犯错误。