Sass @每个循环都有索引

我想知道您是否可以为@each循环获取元素索引

我有以下代码，但我想知道

$I

变量是否是实现这一点的最佳方法

当前代码：

$i: 0;
$refcolors: #55A46A, #9BD385, #D9EA79, #E4EE77, #F2E975, #F2D368, #F0AB55, #ED7943, #EA4E38, #E80D19;

@each $c in $refcolors {
    $i: $i + 1;
    #cr-#{$i} strong {
        background:$c;
    }   
}

---

首先，

@each

函数不是来自Compass，而是来自Sass

---

要回答您的问题，这不能用each循环来完成，但可以很容易地将其转换为一个循环，该循环可以完成以下操作：

@for $i from 1 through length($refcolors) {
    $c: nth($refcolors, $i);

    // ... do something fancy with $c
}

---

要更新此答案：是，您可以通过

@each

循环实现这一点：

$colors-list: #111 #222 #333 #444 #555;

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    .stuff-#{$i} { 
        color: $current-color;
    }
}

---

来源：

有时您可能需要使用数组或映射。我有一个数组，即：

$list = (('sub1item1', 'sub1item2'), ('sub2item1', 'sub2item2'));

我发现将其转换为对象是最简单的：

$list: (
    'name': 'thao',
    'age': 25,
    'gender': 'f'
);

并使用以下命令获取

$i

：

@each $property, $value in $list {
    $i: index(($list), ($property $value));

sass团队还推荐了以下内容，尽管我不是很喜欢：

[…]上面的代码就是我想要解决这个问题的方式。通过添加诸如range（$n）之类的Sass函数，可以提高效率。所以范围（10）=>（1，2，3，4，5，6，7，8，9，10）。然后枚举可以成为：

---

不幸的是，如果$colors列表包含两个相同的值（例如#111、#222、#111、#333），则此方法会中断。在本例中，index（$colors list，#111）将始终返回1，因此$i值将显示为1、2、1、4。遗憾的是，这是一个非常简洁的方法：）这也是一个索引，而不是普通的0索引

@function enumerate($list-or-map) {
    @return zip($list-or-map, range(length($list-or-map));
}