Question

我正在尝试遍历我的颜色列表以更改背景颜色。但是以下失败了。

$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};
      }
    }
  }

＆＃39;错误：未定义的变量：＆＃34; $ speech-bubble - ＆＃34;

有没有办法让它在循环中运行？

Answer 1

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

$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
);

您的代码中的问题是您尝试通过插值引用变量#{}并且SASS不支持variable name interpolation。变量以其全名调用。你也在重复颜色列表。

为什么不：

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

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

1 个答案: