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

我遇到的问题是，$色品牌变量ISN” t被解释为sass变量，但它是一个字面值。我需要这个变量引用的#hheexx！

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

这是在所有possibe，或我是否太贪婪在这里？

Answer 1

我意识到我过于复杂。你不需要任何额外的功能，因为@每个被设计为与地图一起工作并迭代多个值。

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