css - 类型问题制作线性渐变混合 : Expected a color. 得到:#d9d9d9 55%

标签 css sass linear-gradients

我目前正在尝试使用此处描述的精简版 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%);

我收到语法错误:

Expected a color. Got: #ededed 54%

我认为问题出在这一行:

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

因为我注意到以这种方式使用它时效果很好:

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

我相信我已经解决了它是一个类型问题,但似乎无法弄清楚如何解决它。

最佳答案

我相信我找到了解决方案。

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

  &: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;

不再出错。

关于css - 类型问题制作线性渐变混合 : Expected a color. 得到:#d9d9d9 55%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38492831/

相关文章:

CSS Responsive 如何排列标题下方的图片,以便它会自动调整所有手机和 iPad 上的大小

javascript - 如何让视频占据视口(viewport)的高度和宽度?

html - 将褪色黑色分隔符从 "-webkit-gradient"转换为 "linear-gradient"

css - 十大 ie7 css 错误?

javascript - 在图像更改时更改轮播的 bg 颜色

css - 如何指向元素目录之外的 Sprite 文件夹?

javascript - d3 classed() 不能按预期与多个类一起工作?

css - 编译 bootstrap.scss 时出错 - _root.scss 问题

css - 线性渐变中的计算在 IE/Edge 中不起作用

html - 如何使用 css 实现 L 形?