在@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颜色值！

到目前为止，我找到的所有解决方法都包括使用两个列表或键值对。在我的情况下，这些变量已经被设置一次，我希望找到一个解决方案，在颜色更改时无需手动编辑库。

这是否可能，或者我太贪心了？

- Kablam

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

- Ari

---

这太巧妙了，真是美妙。谢谢 :) - Kablam

Answer 2

你可以使用地图。 这里有一个 sassmeister 的游乐场供您使用。

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

- Ari

---

太棒了。谢谢！ 我已经把这个解决方案推到了“必须重新定义所有颜色”的堆中，但这实际上非常有效！您知道为什么Angular会使用这种方式解析变量，而不是使用我之前的技术吗？您能否解释一下？ - Kablam

很高兴能帮上忙。这不是 Angular，而是 SASS。您试图编译 SASS 变量名称，但 SASS 不会这样做。它只编译变量值。 因此，我创建了一个映射，其中键与变量的名称相同，没有 $。@each 循环遍历地图键以创建类名，map-get 使用键提取值，并且我在内容中插入了键（而不是变量）（在内容字符串中预置 $，使其与变量名称相同）。 请查看 SASS 函数：http://sass-lang.com/documentation/Sass/Script/Functions.html - Ari

你说得对，抱歉。我在另一个项目中使用的是Angular，术语搞混了，我的错！ - Kablam