Цикл SASS на карте, получите следующую итерацию

Question

У меня есть такой массив цветов:

$colors: (
  'primary': '#aaa',
  'secondary': '#bbb',
  'color-3': '#ccc',
  'color-4': '#ddd',
  'color-5': '#eee',
);

, и я хочу автоматизировать создание классов в цикле следующим образом:

@each $col in map-keys($theme-colors){
    &.btn-#{$col} {
      background-color: map-get($theme-colors, $col);
      &:hover{
        background-color: map-get($theme-colors, $col + 1); // <= my problem is here to get my "$col + 1"
      }
    }
  }

Моя идея заключается в создании класса btn-primary с основным цветом фона, но при наведении, второстепенный цвет на фоне.

Класс btn-secondary вторичный цвет фона, но при наведении - цвет 3 на фон и т. д.

Какя могу это сделать?

Спасибо;)

Answer 1

Здесь вы можете найти свое решение: https://github.com/elcheio/sass-map-get-next-prev

Используя эту функцию (например, map-get-next function ), вы можете решить свою проблему.

Итакпрежде всего скопируйте и вставьте эту функцию ... очень очень просто (^ _ ^;)

@function map-get-next($map, $key, $fallback: false, $return: value) {
    // Check if map is valid
    @if type-of($map) == map {
        // Check if key exists in map
        @if map-has-key($map, $key) {
            // Init index counter variable
            $i: 0;
            // Init key index
            $key-index: false;
            // Traverse map for key
            @each $map-key, $map-value in $map {
                // Update index
                $i: $i + 1;
                // If map key found, set key index
                @if $map-key == $key {
                    $key-index: $i;
                }
                // If next index return next value or key based on $return
                @if $i == $key-index + 1 {
                    @if $return == key {
                        @return $map-key;
                    } @else {
                        @return $map-value;
                    }
                }
                // If last entry return false
                @if $i == length($map) {
                    @return $fallback;
                }
            }
            @warn 'No next map item for key #{$key}';
            @return $fallback;
        }
        @warn 'No valid key #{$key} in map';
        @return $fallback;
    }
    @warn 'No valid map';
    @return $fallback;
}

Затем вы можете добавить свою карту:

$colors: (
  'primary':   #aaa,
  'secondary': #bbb,
  'color-3':   #ccc,
  'color-4':   #ddd,
  'color-5':   #eee,
);

В конце концов,Вы должны создать цикл @each для извлечения каждой пары / значения вашей карты:

@each $name, $value in $colors{
  .btn-#{$name} {
    background-color: $value;
    &:hover{
      background-color: map-get-next($colors, $name, #ffffff); // <== here you have to write the color for your last item (i.e. 'color-5'; in this example is white)
    }
  }
}

Вот и все! Ваш вывод будет:

.btn-primary {
  background-color: #aaa;
}
.btn-primary:hover {
  background-color: #bbb;
}

.btn-secondary {
  background-color: #bbb;
}
.btn-secondary:hover {
  background-color: #ccc;
}

.btn-color-3 {
  background-color: #ccc;
}
.btn-color-3:hover {
  background-color: #ddd;
}

.btn-color-4 {
  background-color: #ddd;
}
.btn-color-4:hover {
  background-color: #eee;
}

.btn-color-5 {
  background-color: #eee;
}
.btn-color-5:hover {
  background-color: #ffffff;
}