@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--color-brand { 
    background: #00ff11; // don't worry, brand is not actually this color 
} 

私がいる問題は$カラーブランド変数ISN」ということです。しかし、この後に私は何

.prfx-color { 
    display: block; 
    height: 5rem; 
    width: 100%; 
} 
.prfx-color--color-brand { 
    background: $color-brand; 
} 
.prfx-color--color-brand::after { 
    content: "$color-brand"; 
} [...etc] 

もはやsass変数として解釈されませんが、リテラル値です。この変数が参照する#hheexxが必要です！

私が今までに見つけたすべての解決策は、2つのリストまたはキーと値のペアを使用して構成されています。私の状況では、これらの変数はすでに一度設定されているので、色が変わった場合に手動でライブラリを編集する必要がないソリューションが必要です。

これはすべて可能か、私はあまりにも欲張りですか？

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