@each循环与索引

我想知道你是否可以得到@each循环的元素索引。

我有下面的代码，但我想知道如果$ivariables是最好的方式来做到这一点。

当前代码：

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

Answer 1

首先， @each函数不是来自Compass，而是来自Sass。

---

要回答你的问题，这不能用每个循环完成，但很容易将其转换为@for循环，可以这样做：

 @for $i from 1 through length($refcolors) { $c: nth($refcolors, $i); // ... do something fancy with $c } 

Answer 2

要更新这个答案：是的，你可以用@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; } } 

资料来源： http : //12devs.co.uk/articles/handy-advanced-sass/

Answer 3

有时您可能需要使用数组或地图。 我有一个数组的数组，即：

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

我发现把它转换成一个对象是最简单的：

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

并使用以下来获得$i ：

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

sass团队也推荐以下，虽然我不是一个粉丝：

[…]上面的代码是我想解决这个问题。 通过添加一个像范围（$ n）这样的Sass函数可以使它更高效。 因此，范围（10）=>（1,2,3,4,5,6,7,8,9,10）。 然后枚举可以成为：

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

链接。