Как найти индекс SCSS элемента в списке?

Question

Я работаю над SCSS Loops и застрял с проблемой. Проблема в том, чтобы рассмотреть список цветов.

$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 / Документация / Sass / Script / Functions.html # index-instance_method