Проблема создания динамической затененной цветовой палитры в SASS

Question

Проблема создания динамической затененной цветовой палитры в SASS

Я пытаюсь динамически создавать свои цветовые палитры из набора базовых цветов, используя SASS. Ранее я создавал каждый базовый цвет вручную, сначала определив набор цветовых переменных, а затем создал карту каждого базового цвета с различными оттенками. Затем каждая карта цветов была помещена в карту палитры.

Затем, чтобы вернуть цвет / оттенок, я бы использовал функцию, которая извлекала значение из карты цветов в карте палитры.

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

Вот мой предыдущий код, чтобы дать вам представление о том, что я делал:

$color-percent-change: 3%;

$color-blue: hsla(196, 85%, 57%, 1);
$color-brown: hsla(15, 40%, 33%, 1);
$color-charcoal: hsla(0, 0%, 23%, 1);

$blue: (
    'lighten-3': lighten($color-blue, ($color-percent-change * 3)),
    'lighten-2': lighten($color-blue, ($color-percent-change * 2)),
    'lighten-1': lighten($color-blue, ($color-percent-change * 1)),
    'base': $color-blue,
    'darken-1': darken($color-blue, ($color-percent-change * 1)),
    'darken-2': darken($color-blue, ($color-percent-change * 2)),
    'darken-3': darken($color-blue, ($color-percent-change * 3))
);

$brown: (
    'lighten-3': lighten($color-brown, ($color-percent-change * 3)),
    'lighten-2': lighten($color-brown, ($color-percent-change * 2)),
    'lighten-1': lighten($color-brown, ($color-percent-change * 1)),
    'base': $color-brown,
    'darken-1': darken($color-brown, ($color-percent-change * 1)),
    'darken-2': darken($color-brown, ($color-percent-change * 2)),
    'darken-3': darken($color-brown, ($color-percent-change * 3))
);

$charcoal: (
    'lighten-3': lighten($color-charcoal, ($color-percent-change * 3)),
    'lighten-2': lighten($color-charcoal, ($color-percent-change * 2)),
    'lighten-1': lighten($color-charcoal, ($color-percent-change * 1)),
    'base': $color-charcoal,
    'darken-1': darken($color-charcoal, ($color-percent-change * 1)),
    'darken-2': darken($color-charcoal, ($color-percent-change * 2)),
    'darken-3': darken($color-charcoal, ($color-percent-change * 3))
);

$palette: (
    'blue': $blue,
    'brown': $brown,
    'charcoal': $charcoal,
);

@function color($color, $type: 'base') {

    @if map-has-key($palette, $color) {

        $current: map-get($palette, $color);

        @if map-has-key($current, $type) {

            @return map-get($current, $type);

        }
    }

    @warn 'Unknown #{$color} - #{$type} in #{$palette}.';
    @return null;

}

.blue {
    color: color('blue', 'lighten-2');
}

jsfiddle

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

argument `$map` of `map-has-key($map, $key)` must be a map

Вот новый код:

$color-percent-change: 3%;

$colors: (
    'brand': hsla(265, 35%, 50%, 1),
    'black': hsla(0, 0%, 0%, 1),
    'blue': hsla(196, 85%, 57%, 1),
    'brown': hsla(15, 40%, 33%, 1),
    'charcoal': hsla(0, 0%, 23%, 1),
    'emerald': hsla(140, 52%, 55%, 1),
    'green': hsla(101, 55%, 60%, 1),
    'grey': hsla(0, 0%, 47%, 1),
    'indigo': hsla(225, 57%, 47%, 1),
    'orange': hsla(34, 100%, 53%, 1),
    'pink': hsla(309, 80%, 70%, 1),
    'purple': hsla(285, 67%, 60%, 1),
    'red': hsla(11, 85%, 57%, 1),
    'silver': hsla(0, 0%, 80%, 1),
    'slate': hsla(210, 20%, 33%, 1),
    'teal': hsla(180, 100%, 24%, 1),
    'white': hsla(0, 100%, 100%, 1),
    'yellow': hsla(55, 100%, 57%, 1),
);

@each $name, $color in $colors {
  $name: (
    'lighten-10': lighten($color, ($color-percent-change * 10)),
    'lighten-9': lighten($color, ($color-percent-change * 9)),
    'lighten-8': lighten($color, ($color-percent-change * 8)),
    'lighten-7': lighten($color, ($color-percent-change * 7)),
    'lighten-6': lighten($color, ($color-percent-change * 6)),
    'lighten-5': lighten($color, ($color-percent-change * 5)),
    'lighten-4': lighten($color, ($color-percent-change * 4)),
    'lighten-3': lighten($color, ($color-percent-change * 3)),
    'lighten-2': lighten($color, ($color-percent-change * 2)),
    'lighten-1': lighten($color, ($color-percent-change * 1)),
    'base': $color,
    'darken-1': darken($color, ($color-percent-change * 1)),
    'darken-2': darken($color, ($color-percent-change * 2)),
    'darken-3': darken($color, ($color-percent-change * 3)),
    'darken-4': darken($color, ($color-percent-change * 4)),
    'darken-5': darken($color, ($color-percent-change * 5)),
    'darken-6': darken($color, ($color-percent-change * 6)),
    'darken-7': darken($color, ($color-percent-change * 7)),
    'darken-8': darken($color, ($color-percent-change * 8)),
    'darken-9': darken($color, ($color-percent-change * 9)),
    'darken-10': darken($color, ($color-percent-change * 10))
  );
}

@function color($color, $type: 'base') {
    @if map-has-key($color, $type) {
        @return map-get($color, $type);
    }
    @warn 'Unknown #{$color} - #{$type} in #{$color}.';
    @return null;
}

.red {
    color: color('red', 'lighten-2');
}

jsfiddle

Я думаю, что @each определение цикла $name как имя переменной вызывает проблему, так как она не распознает ее как карту SASS? Но я не совсем уверен, обычно мои SASS-файлы довольно просты, это первый раз, когда я действительно пошел дальше, чем просто использование простых переменных и функций с ним, поэтому я, вероятно, упускаю что-то относительно прямолинейное?

0

css function sass sass-maps

Источник

user584711 14 июн '18 в 12:21

1 ответ

Решение

Другие вопросы по тегам css function sass sass-maps

user9503418 14 июн '18 в 12:52 2018-06-14 12:52 · Accepted Answer · 2018-06-14 12:52

Вам необходимо объединить сгенерированный сгенерированный список цветов в основной список, используя имя цвета в качестве карты ключей, вместо генерации переменной путем интерполяции:

// modification
$color-percent-change: 3%;

// color list definition
$colors: (
    'brand': hsla(265, 35%, 50%, 1),
    'black': hsla(0, 0%, 0%, 1),
    'blue': hsla(196, 85%, 57%, 1),
    'brown': hsla(15, 40%, 33%, 1),
    'charcoal': hsla(0, 0%, 23%, 1),
    'emerald': hsla(140, 52%, 55%, 1),
    'green': hsla(101, 55%, 60%, 1),
    'grey': hsla(0, 0%, 47%, 1),
    'indigo': hsla(225, 57%, 47%, 1),
    'orange': hsla(34, 100%, 53%, 1),
    'pink': hsla(309, 80%, 70%, 1),
    'purple': hsla(285, 67%, 60%, 1),
    'red': hsla(11, 85%, 57%, 1),
    'silver': hsla(0, 0%, 80%, 1),
    'slate': hsla(210, 20%, 33%, 1),
    'teal': hsla(180, 100%, 24%, 1),
    'white': hsla(0, 100%, 100%, 1),
    'yellow': hsla(55, 100%, 57%, 1),
);

// creates a list to store lists of color modifications, with key defined as color name
$colormap: ();

@each $name, $color in $colors {

  // generate the list of colors modifications
  $generated: (
    'lighten-10': lighten($color, ($color-percent-change * 10)),
    'lighten-9': lighten($color, ($color-percent-change * 9)),
    'lighten-8': lighten($color, ($color-percent-change * 8)),
    'lighten-7': lighten($color, ($color-percent-change * 7)),
    'lighten-6': lighten($color, ($color-percent-change * 6)),
    'lighten-5': lighten($color, ($color-percent-change * 5)),
    'lighten-4': lighten($color, ($color-percent-change * 4)),
    'lighten-3': lighten($color, ($color-percent-change * 3)),
    'lighten-2': lighten($color, ($color-percent-change * 2)),
    'lighten-1': lighten($color, ($color-percent-change * 1)),
    'base': $color,
    'darken-1': darken($color, ($color-percent-change * 1)),
    'darken-2': darken($color, ($color-percent-change * 2)),
    'darken-3': darken($color, ($color-percent-change * 3)),
    'darken-4': darken($color, ($color-percent-change * 4)),
    'darken-5': darken($color, ($color-percent-change * 5)),
    'darken-6': darken($color, ($color-percent-change * 6)),
    'darken-7': darken($color, ($color-percent-change * 7)),
    'darken-8': darken($color, ($color-percent-change * 8)),
    'darken-9': darken($color, ($color-percent-change * 9)),
    'darken-10': darken($color, ($color-percent-change * 10))
  );

  // merge the generated color list to the main color list
  $colormap: map-merge($colormap, ($name: $generated));

}

@function color($color, $type: 'base') {

    // Check is the main color exists in the generated list, and if the color modification exist in the specific color list
    @if map-has-key($colormap, $color) && map-has-key(map-get($colormap, $color), $type) {

        // return the specific color
        @return map-get(map-get($colormap, $color), $type);

    }

    // warning
    @warn 'Unknown #{$color} - #{$type} in #{$color}.';

    // return default color
    @return null;

}

// test
.red {
    color: color('red', 'lighten-2');
}

Вы можете увидеть рабочий пример здесь.

Надеюсь, поможет.