Выбор цветов из переменных в @mixin sass - PullRequest
Новая
       68

Выбор цветов из переменных в @mixin sass

0 голосов
/ 22 марта 2020

Цель состоит в том, чтобы создать тот же стиль, но с разными цветами.

Я установил некоторые переменные для значений цвета и создал @mixin, которому я передаю значение (1, 2, 3). Я хотел бы «прикрепить» входное значение для выбора переменных, генерируя различные оттенки цветов на основе входных данных.

(Каждое число соответствует уровню: @mixin будет использоваться для стилизации цены таблица сравнения)

Я пробовал следующее, но независимо от комбинации (я пробовал разные интерполяции), переменные обрабатываются не как цвета, а как текст: 

$color-1: hsl(150, 80%, 55%);
$color-2: hsl(175, 80%, 55%);
$color-3: hsl(190, 95%, 55%);

@mixin tier($value) {
  .tier#{$value} {
    box-shadow: 0 5px 30px -5px transparentize($color-#{$value}, 0.4);

    h1 {
      color: $color-#{$value};
    }
  }
}

@include tier(1);
@include tier(2);
@include tier(3);

Я Я новичок в sass, и я не могу придумать альтернативы, поэтому любые отзывы приветствуются.

...