Question

使用SASS，我正在尝试创建一个动态线性渐变，所以如果我有一个颜色数组，我想循环遍历它并将每种颜色添加到渐变中。

@import "compass";

$colors: red green blue;
$numColors: length($colors);

div {
  $g: nth($colors, 1);
  @for $h from 2 to ($numColors + 1) {
    $g: $g , nth($colors, $h);
  }
  border: $g;
  background: linear-gradient($g);
}

这会导致以下错误

At least two color stops are required for a linear-gradient

删除background参数将编译，看起来像这样

border: red, green, blue;

（我知道这不是一个有效的边界，我只想＆＃34;追踪＆＃34; out $ g）

如何动态迭代数组并创建线性渐变？

Answer 1

这里有2个问题。

线性渐变是一种自定义Compass函数，它是产生该错误的原因。因此，它需要特定数量的参数。
您没有创建包含3个元素的列表，您正在创建一个包含单个元素的列表，如下所示：[[red, green], blue]。列表的第一个元素是包含2个元素的列表。

您需要的是append()功能：

div {
  $g: nth($colors, 1);
  @for $h from 2 to ($numColors + 1) {
    $g: append($g , nth($colors, $h));
  }
  border: $g;
  background: linear-gradient($g);
}

这将为您提供预期的输出：

div {
  border: red green blue;
  background: linear-gradient(#ff0000, #008000, #0000ff);
}

使用SASS将色标动态添加到线性渐变

1 个答案: