在@each循环中使用sass变量

我试图为我们在企业标识中使用的所有颜色创建一个小概览。我们所有的颜色都是在_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

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

这是可能的，还是我太贪心了？

你可以用一张地图。 这是你的游乐场

$cool: blue;
$mad: red;

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

.prfx-color {
  @each $color in map-keys($colors) {
    &--#{$color} {
      background-color: map-get($colors, $color);

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

---

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

$cool: blue;
$mad: red;

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

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

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

---

那个是令人惊叹的。谢谢我已经把这个解决方案推到了“必须重新定义所有颜色”的堆上，但这实际上效果很好！你知道为什么Angular用这种方式解析变量，而不是使用我以前的技术吗？你能解释一下吗？很高兴能帮上忙。这不是棱角分明，而是粗鲁无礼。您试图编译SASS变量名，但SASS没有这样做。它只编译变量值。所以我制作了一个映射，其中键与变量同名，没有$。@each在map键上循环以创建类名，map get使用该键提取值，我为内容插入键（而不是变量）（在内容字符串中预加$，使其与变量名相同。检查SASS函数：你是对的，抱歉。我在另一个项目中使用Angular，但术语混淆了，我的错！这太漂亮了，太漂亮了。谢谢：）