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