SASS Mixin渐变色 - 两种颜色

Question

我正在寻找在下面的mixin中包含不同的结束和中间颜色的最佳方法。

scrimCoordinates的原因是它创建了一个缓和的线性渐变而没有条带 - 非常聪明！请阅读Andreas Larsen's article了解原因。

@mixin scrimGradient($startColor: $cpi-purple, $direction: 'to bottom') {

  $scrimCoordinates: (
    0: 1,
    19: 0.738,
    34: 0.541,
    47: 0.382,
    56.5: 0.278,
    65: 0.194,
    73: 0.126,
    80.2: 0.075,
    86.1: 0.042,
    91: 0.021,
    95.2: 0.008,
    98.2: 0.002,
    100: 0
  );

  $hue: hue($startColor);
  $saturation: saturation($startColor);
  $lightness: lightness($startColor);
  $stops: ();

  @each $colorStop, $alphaValue in $scrimCoordinates {
    $stop: hsla($hue, $saturation, $lightness, $alphaValue) percentage($colorStop/100);
    $stops: append($stops, $stop, comma);
  }

  background: linear-gradient(unquote($direction), $stops);

}