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;应该将os.utime("file.txt", None)处理为os.utime("file.txt")。有关如何使这项工作的任何想法？谢谢！

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... */

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

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

1 个答案: