scss @each与颜色映射一起使用

Question

$Black: rgba(0, 0 ,0, 0.87);

$Color: (
  black: $Black,
  white: $White,
  primary: $Primary,
  second: $Second,
  accent: $Accent
);

@each $get-color in $Color {
  .font-#{$get-color} {
    color: $get-color;
  }
}

Compile to

.font-black rgba(0, 0, 0, 0.87) {
  color: black rgba(0, 0, 0, 0.87)
}

Color codes are compile together. I hope it will be written as follows when it is converted.

.font-black {
  color: rgba(0, 0, 0, 0.87)
}

Answer 1

You have to use 2 variables in your loop: one for key and one for your value. So you could try this:

$Black: rgba(0, 0 ,0, 0.87);

$Color: (
  black: $Black
);

@each $get-color, $value in $Color {
  .font-#{$get-color} {
    color: $value;
  }
}