sass - 在@each 循环中使用 sass 变量

Question

我正在尝试为我们在企业标识中使用的所有颜色创建一个小概览。我们所有的颜色都已在 _settings-colors.scss 中定义，我需要这一点 css 的唯一原因是为了库，其中需要列出颜色。

我现在的情况如下:

$colors-brand: color-brand, color-brand-40, color-brand-60, color-brand-70;

.prfx-color {
    display: block;
    height: 5rem;
    width: 100%;

    @each $color in $colors-brand {
        &--#{$color} {
            background-color: #{'$'+$color};

            &::after {
                content: '$'+$color;
            }
        }
    }
}

这些颜色品牌变量设置在我包含在此 scss 文件中的另一个文件中。

上面的代码输出如下:

.prfx-color {
  display: block;
  height: 5rem;
  width: 100%;
}
.prfx-color--color-brand {
    background: $color-brand;
}
.prfx-color--color-brand::after {
    content: "$color-brand";
} [...etc]

然而，我所追求的是:

.prfx-color--color-brand {
    background: #00ff11; // don't worry, brand is not actually this color
}

我遇到的问题是 $color-brand 变量不再被解释为 sass 变量，而是一个字面值。我需要这个变量引用的#hheexx!

到目前为止，我找到的所有解决方案都是使用两个列表或一个键值对。在我的情况下，这些变量已经设置了一次，我想要一个解决方案，如果颜色发生变化，我不想手动编辑库。

这完全有可能，还是我太贪心了？

Answer 1

然后我意识到我把它复杂化了。您不需要任何额外的函数，因为 @each 设计用于处理映射并迭代多个值。

$cool: blue;
$mad: red;

$colors: (
  cool: $cool,
  mad: $mad
);

.prfx-color {
  @each $key, $val in $colors {
    &--#{$key} {
      background-color: $val;

      &::after { content: "$#{$key}"; }
    }
  }
}