使用 SASS 为线性渐变动态添加色标答案

【问题标题】：Use SASS to dynamically add color stops to linear-gradient使用 SASS 为线性渐变动态添加色标
【发布时间】：2015-05-12 18:03:44
【问题描述】：

使用 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;

（我知道这不是一个有效的边界，我只是想“追踪”出 $g）

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

【问题讨论】：

您打算使用添加供应商前缀的 compass linear-gradient mixin，还是使用标准 CSS linear-gradient？

标签： css sass compass-sass

【解决方案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);
}

【讨论】：