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