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

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

在@each循环中使用sass变量

2 个答案: