scss each loop with list - SassError: $color: XX,XX,XX is not a color

Question

我正在尝试在 scss 中编写一个循环，它接受一个列表并使用每个循环的 $key、$val 来填充和命名 @keyframes 规则。这是我的代码：

$alarmRgb: 255, 213, 0;
$infoRgb: 25, 97, 166;
$warnRgb: 240, 111, 50;
$errorRgb: 228, 35, 38;
$successRgb: 0, 149, 52;

$pulseList:(
  alarm: $alarmRgb,
  info: $infoRgb,
  warn:  $warnRgb,
  error: $errorRgb,
  success: $successRgb
);

@each $key, $val in $pulseList {
  @keyframes pulse-#{$key}  {
    0% {
      box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0.7);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(unquote(#{$val}), 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(unquote(#{$val}), 0);
    }
  }
}

所以我将 rgb 值创建为变量（但不是 A 值），然后使用这些变量创建列表，创建循环并尝试将 3 个数字值放入 box-shadow，rgba 值中。但是我收到错误：SassError: $color: 255, 213, 0 is not a color.

我从循环中删除了 unquote 方法，但它不起作用。我将我的变量更改为字符串值，然后重新应用到 unquote 方法，这没有用。我不确定我能做些什么来让我的 scss 循环使用我列表中的值。谁能告诉我我做错了什么？提前致谢。

Answer 1

我通过以下修改得到了这个...

$alarmRgb: rgb(255, 213, 0);
$infoRgb: rgb(25, 97, 166);
$warnRgb: rgb(240, 111, 50);
$errorRgb: rgb(228, 35, 38);
$successRgb: rgb(0, 149, 52);

$pulseList:(
  alarm: $alarmRgb,
  info: $infoRgb,
  warn:  $warnRgb,
  error: $errorRgb,
  success: $successRgb
);

@each $key, $val in $pulseList {
  // pulse animation for info #{$key}
  @keyframes pulse-#{$key}  {
    0% {
      box-shadow: 0 0 0 0 rgba($val, 0.7);
    }

    70% {
      box-shadow: 0 0 0 10px rgba($val, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba($val, 0);
    }
  }
}

scss each loop with list - SassError: $color: XX,XX,XX is not a color

scss each loop with list - SassError: $color: XX,XX,XX is not a color

sass