Вывод светлых и темных вариантов цвета

Question

Я хочу вывести некоторые служебные классы и не могу получить более светлые и темные тона моего основного цвета для вывода как более темных, так и более светлых тонов. Я новичок в 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);
      }
    }
  }
}

Answer 1

Похоже, вы генерируете имя метода в 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);
        }
      }
    }
  }

РЕДАКТИРОВАТЬ: FWIW, я протестировал решение @if/@elseif на sassmeister.com и, похоже, провернул CSS, который вам нужен.