地图上的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的主要颜色背景，但在悬停，第二颜色在背景。

A类btn-secondary二次色背景，但在悬停时，背景颜色为-3色等.

我该怎么做？

(谢谢;)

Answer 1

在这里您可以找到解决方案：https://github.com/elcheio/sass-map-get-next-prev

使用该函数(即映射-获取-下一个函数)，您可以解决问题。

所以，首先，复制并粘贴这个功能.非常简单(^_^;)

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