SCSS @each循环生成@keyframes报SassError:$color不是颜色如何解决

错误原因 #

• 你定义的$alarmRgb这类变量本质是三个数值组成的列表，不是Sass内置的color数据类型，无法直接传入rgba()函数作为第一个参数
• 你使用#{}插值、unquote()操作的逻辑是把值转成纯文本字符串，反而更不符合Sass内置函数的参数类型要求，因此触发报错

修复方案（推荐写法） #

直接把变量定义为合法的Sass RGB颜色类型，Sass的rgba()函数原生支持「传入已有的rgb颜色+单独的透明度值」的用法，不需要手动拆分RGB通道数值：

// 直接定义为Sass识别的rgb颜色类型
$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 {
  @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);
    }
  }
}

可选方案（保留三值列表写法） #

如果你确实需要单独存储RGB三个通道的数值，可以用nth()函数手动提取列表对应位置的数值传入rgba()：

// 原有变量定义不变
$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(nth($val, 1), nth($val, 2), nth($val, 3), 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(nth($val, 1), nth($val, 2), nth($val, 3), 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(nth($val, 1), nth($val, 2), nth($val, 3), 0);
    }
  }
}

内容的提问来源于stack exchange，提问作者NewToAngular