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

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

'错误:未定义的变量:"$ speech-bubble--"

有没有办法让这个循环工作？

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不支持变量名插值.变量以其全名调用.你也在重复颜色列表.

为什么不:

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