在 @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}"; }
    }
  }
}