Наличие проблемы 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, но вы можете создавать селекторы.

$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;
  }
}

Здесь вы можете увидеть вывод

Если вы все еще хотитечтобы использовать переменные, вы можете рассмотреть возможность использования карт Sass или переменных CSS.

Answer 2

Sass не поддерживает ссылки на динамические переменные.Однако вы можете использовать @function вместо @mixin для достижения своей цели:

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

Однако это не сильно отличается от встроенных функций управления цветом Sass, поэтому, возможно, стоит их использовать.

Кроме того, ваши расчеты оттенков могут быть неверными, пожалуйста, обратитесь к этой статье , она предлагает другое решение для расчета оттенков.Я предпочитаю использовать слегка модифицированную версию, которая позволяет более удобное использование аргументов:

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