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

编译为

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

颜色代码一起编译。 希望将其转换为如下形式。

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

Answer 1

您必须在循环中使用2个变量：一个用于键，另一个用于值。因此，您可以尝试以下方法：

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

$Color: (
  black: $Black
);

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