[SCSS]色で処理を変えたい

Question

前提・実現したいこと

idの値によりどの色見本ボタンがクリックされたかに応じて表示をしようとしています。

発生している問題・エラーメッセージ

コンパイルができません

Invalid index 2 for a list with 1 elements.
  stdin 10:14  root stylesheet on line 10 at column 14

該当のソースコード

$colors: ( 
 'red'                  #ff0000,
 'black'                   #000,
 'light-black'                 #060606,
 'brown'                 #F6F6F6,
);

@each $color in $colors {
 $color: nth($color, 1);
 $bgColor:   nth($color, 2);

#{$color} ~ label {
  background-color: $bgColor;
  color: $bgColor;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  white-space: nowrap;
 }
}

Answer 1

質問文のコードを以下のように修正することで質問者さんの実現したいことは行えると思います(動作確認用リンク)。

$colors: ( 
 'red'                  #ff0000,
 'black'                   #000,
 'light-black'                 #060606,
 'brown'                 #F6F6F6,
);

@each $color in $colors {
 $fontColor: nth($color, 1); // 修正
 $bgColor:   nth($color, 2);

.#{$fontColor} ~ label { // 修正
  background-color: $bgColor;
  color: $fontColor; // 修正
  width: 50px;
  height: 50px;
  border-radius: 50%;
  white-space: nowrap;
 }
}

Comments

[renoj]

質問に反応していただきありがとうございます。この回答で学ぶ機会が得られました。ありがとうございました。