如何查找列表中元素的 SCSS 索引？

Question

我正在研究 SCSS 循环，但遇到了一个问题。问题是考虑一个颜色列表。

$colors:'red','green','red','blue';

@each $color in $colors{
  $i:index($colors,$color);
  .cube:nth-child(#{$i}){
    background:$color;
  };
}

上述程序的输出是

.cube:nth-child(1) {
  background: "red";
}

.cube:nth-child(2) {
  background: "green";
}

.cube:nth-child(1) { // issue here unable to get index value 3
  background: "red"; 
}

.cube:nth-child(4) {
  background: "blue";
}

我无法获得索引值 3。有人能帮我解决这个问题吗？我的问题是

1. 如何获得3的索引值？
2. 是否可以使用每个获取索引？如果“是”怎么办？
3. 如果不是，有什么替代方法？

Answer 1

这是你需要的：

$colors:'red','green','red','blue';

@for $i from 1 through length($colors) {
  $color: nth($colors, $i);
  .cube:nth-child(#{$i}){
    background:$color;
  };
}

您的失败原因index($colors,$color)将始终返回元素的第一个位置：阅读 -> http://sass-lang.com/documentation/Sass/Script/Functions.html#index-instance_method