Sass 如何将SCSS变量与@each指令结合使用

我正试图重写一些SCS，以减少下面编写的重复代码

.bg-primary {
   background: $primary;
}
.bg-secondary {
   background: $secondary;
}
.bg-tertiary {
   background: $tertiary;
}

…对这样的事情：

$colors: primary secondary tertiary;

@each $color in $colors {
   .bg-#{$color}{
      background: $color;
   }
}

---

但是问题是

background:$color

将输出

background:primary而不是
背景：$primary该轮到他处理的内容应为
background:#000。你有没有想过我该怎么做？谢谢
 一种方法是使用键值对定义颜色映射。然后，该键可以用作类名的一部分：

$colors: (primary: #000, secondary: #f00, tertiary: #00f);

@each $colorkey, $value in $colors {
   .bg-#{$colorkey}{
      background: $value;
   }
}

若要在其他地方使用颜色，则必须使用

.example {
  color: map-get($colors, tertiary);
}

在某些情况下，颜色值已经定义，例如，由基础框架定义。可以在地图中使用以前定义的颜色，但如果要在循环中使用单个变量（重复的变量名称），这当然会带来一些无法避免的冗余：

另一方面，这样可以更容易地访问其他地方的颜色。
一种方法是使用键值对定义颜色映射。然后，该键可以用作类名的一部分：

$colors: (primary: #000, secondary: #f00, tertiary: #00f);

@each $colorkey, $value in $colors {
   .bg-#{$colorkey}{
      background: $value;
   }
}

若要在其他地方使用颜色，则必须使用

.example {
  color: map-get($colors, tertiary);
}

在某些情况下，颜色值已经定义，例如，由基础框架定义。可以在地图中使用以前定义的颜色，但如果要在循环中使用单个变量（重复的变量名称），这当然会带来一些无法避免的冗余：

另一方面，这样可以更方便地访问其他地方的颜色。
感谢您的关注。你的解决方案有效，但我觉得不太自然。您知道一种简单地在$color输出中添加$sign的方法吗？类似于
background:$#{$color}
。我完全理解您，如果有一种引用动态创建的变量的方法，那就太好了。在发布答案之前，我查看了规范并进行了快速研究，但没有找到任何适用于此场景的有用信息。我所知道的是，这个问题出现过多次，一次是通过使用列表解决的，然后使用后来介绍的地图。我将把这个标记为答案，因为似乎没有其他方法，这个解决方案使它稍微干净一些。谢谢你调查这件事。你的解决方案有效，但我觉得不太自然。您知道一种简单地在$color输出中添加$sign的方法吗？类似于
background:$#{$color}
。我完全理解您，如果有一种引用动态创建的变量的方法，那就太好了。在发布答案之前，我查看了规范并进行了快速研究，但没有找到任何适用于此场景的有用信息。我所知道的是，这个问题出现过多次，一次是通过使用列表解决的，然后使用后来介绍的地图。我将把这个标记为答案，因为似乎没有其他方法，这个解决方案使它稍微干净一些。谢谢