css - 地图上的 SASS 循环，获得下一次迭代

问题描述

我有一个这样的颜色数组：

$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 色等。

我怎样才能做到这一点？

谢谢 ;）

标签： csssass

在这里您可以找到您的解决方案：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;
}

css - 地图上的 SASS 循环，获得下一次迭代

问题描述

解决方案

推荐阅读