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变量。

变量存在SCSS Mixin问题

2 个答案: