有变量的SCSS Mixin问题

Question

我有一堆核心颜色

$blue : blue;
$green: green;
$red: red;

我需要像这样染上所有这些

$blue-80: lighten($blue, 20%);
$blue-60: lighten($blue, 40%);
$blue-40: lighten($blue, 60%);
$blue-20: lighten($blue, 80%);

我正在尝试创建一个能为我做到这一点的@mixin。就像是

@mixin tint($color) {
   ${$color}: lighten($color, 20%); 'and then the rest'
 }

所以我可以在其他地方使用$ blue-80

.blue-80-border {
   border-color: $blue-80;
 }

Answer 1

Sass不支持动态变量引用。但是你可以使用@function而不是@mixin来实现你的目标：

@function tint($color, $amount: 20%) {
   @return lighten($color, $amount);
}

然而，它与本机Sass颜色管理功能看起来没什么不同，因此可能值得使用它们。

此外，你的色调计算可能是错误的，请参考this article，它提出了不同的色彩计算解决方案。我更喜欢使用略微修改的版本，允许更方便的参数使用：

@function tint($color, $percentage) {
    @return mix(white, $color, 100% - $percentage);
} 

Answer 2

您不能使用Sass动态创建变量，但可以创建选择器。

$blue: blue;
$green: green;
$red: red;

@each $color in $blue, $green, $red {
  $i: 90;

  @while 0 < $i {
    #{$color}-#{$i} {
      color: mix(white, $color, $i);
    }
    $i: $i - 10;
  }
}

You can see the output here

如果您仍想使用变量，可能需要考虑使用Sass贴图或CSS变量。