Sass 输出颜色较浅和较深的变体

我想输出一些实用程序类，但我似乎无法获得基础颜色的较浅和较深色调来输出较深和较浅的色调。我是Scss的新手，但这就是我所拥有的：

$aqua: #00ffff;

$color-map: (
  background-color-aqua-light: ($aqua, background-color, lighten,),
  color-aqua-light: ($aqua, color, lighten),
  background-color-aqua-dark: ($aqua, background-color, darken),
  color-aqua-dark: ($aqua, color, darken)
);

@each $color-class, $colour-variables in $color-map {

  $class-name: nth($color-class, 1);
  $color-name: nth($colour-variables, 1);
  $color-type: nth($colour-variables, 2);
  $color-brightness: nth($colour-variables, 3);


  @for $i from 20 through 100{
    @if $i % 10 == 0{
      $percentage: $i*0.5%;
      .#{$class-name}-#{$i}{
        #{$color-type}: #{$color-brightness}($color-name, $percentage);
      }
    }
  }
}

---

看起来您正在CSS中生成方法名称：

所以这个SCSS

#{$color-type}: #{$color-brightness}($color-name, $percentage);

变成这个CSS

.background-color-aqua-light-40 {
  background-color: lighten(#00ffff, 20%);
}

据我所知，您不能插入SASS方法名，也不能让SASS来解释它。但是我认为您可以（也许不那么优雅地）通过

@if

和

@elseif

规则在

@for

循环中绕过这个限制

@for $i from 20 through 100 {
    @if $i % 10 == 0 {
      $percentage: $i*0.5%;
      .#{$class-name}-#{$i} {
        @if ( $color-brightness == lighten ) {
          #{$color-type}: lighten($color-name, $percentage);
        } @elseif ( $color-brightness == darken ) {
          #{$color-type}: darken($color-name, $percentage);
        }
      }
    }
  }

EDIT:FWIW，我在上测试了

@if/@elseif

解决方案，它似乎能实现您所追求的CSS