Sass 循环遍历数组和当前变量

我试图循环遍历我的颜色列表以更改背景颜色。但以下失败。

$speech-bubble-default: $colors-chalk;
$speech-bubble-blush: $colors-blush;
$speech-bubble-brick: $colors-brick;
$speech-bubble-pink: $colors-pink;
$speech-bubble-slate: $colors-slate;

$colors-list: blush brick default pink slate;

  @each $current-color in $colors-list {
    &.speech-bubble--#{$current-color} {
      background-color: $speech-bubble--#{$current-color};

      &::after {
        border-bottom-color: $speech-bubble--#{$current-color};
      }
    }
  }

'错误：未定义的变量：“$speech-bubble--”

有没有办法让它循环工作？

我认为你必须把这个变得更简单。我会创建一个列表来管理颜色。这样您就可以正确创建变量并避免重复代码。

$colors-list:(
  default: 'chalk',
  blush: 'blush',
  brick: 'brick',
  pink: 'pink',
  slate: 'slate'
);

如果您想要一种更具描述性和语义的方式来将颜色名称与其功能分开，您可以像这样创建颜色变量的嵌套列表：

  $chalk: 'chalk';
  $blush: 'blush';
  $brick: 'brick';
  $pink: 'pink';
  $slate: 'slate';


$colors-list:(
  default: $chalk,
  blush: $blush,
  brick: $brick,
  pink: $pink,
  slate: $slate
);

代码中的问题是您试图通过插值引用变量#{} and 变量名插值 https://github.com/sass/sass/issues/132SASS 不支持。变量通过其全名来调用。您还重复了颜色列表。

Why not:

@each $key,$val in $colors-list{
  .speech-bubble--#{$key} {
    background-color: #{$val};
  }
}