使用 SASS 为 linear-gradient 动态添加色标

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

去掉后台参数会编译，看起来像这样

border: red, green, blue;

（我知道这不是一个有效的边界，我只是想 "trace" 出 $g）

如何动态循环访问数组并创建线性渐变？

Answer 1

这里有 2 个问题。

linear-gradient 是一个自定义的 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 为 linear-gradient 动态添加色标

Use SASS to dynamically add color stops to linear-gradient

css

sass

compass-sass