如何结合使用 SCSS 变量和 @each 指令

Question

我正在尝试重写一些 SCSS 以减少下面编写的重复代码...

.bg-primary {
   background: $primary;
}
.bg-secondary {
   background: $secondary;
}
.bg-tertiary {
   background: $tertiary;
}

...到这样的事情：

$colors: primary secondary tertiary;

@each $color in $colors {
   .bg-#{$color}{
      background: $color;
   }
}

但问题是background: $color 将输出background: primary; 而不是background: $primary;，而他应该将其处理为background: #000;。关于如何使这项工作的任何想法？谢谢！

Answer 1

一种方法是使用键值对定义颜色映射。然后可以将键用作类名的一部分：

$colors: (primary: #000, secondary: #f00, tertiary: #00f);

@each $colorkey, $value in $colors {
   .bg-#{$colorkey}{
      background: $value;
   }
}

要在其他地方使用颜色，您必须使用

.example {
  color: map-get($colors, tertiary);
}

在某些情况下，颜色值已经定义，例如通过一个底层框架。可以在地图中使用之前定义的颜色，但是如果您想在循环中使用单个变量（重复的变量名称），这当然会带来一些您无法避免的冗余：

$primary: #000;
$secondary: #f00;
$tertiary: #00f;

$colors: (primary: $primary, secondary: $secondary, tertiary: $tertiary);
/* loop see above... */

另一方面，这使得在其他地方访问颜色变得更加容易。