How to Find the SCSS Index of the element in the list?

Question

Iam working on SCSS Loops and got stuck with a problem. The Problem is consider a list of colors.

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

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

The Output of the above program is

.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";
}

I am unable to get the index value 3. Can Someone help me to solve this issue. My question is

how to get the index value of 3?
Is it possible to get the index using each? if "YES" how?
If not what's the alternative way?

each loop with index:https://stackoverflow.com/questions/15146706/each-loop-with-index — לבני מלכה, Nov 05 '18 at 13:44
do you want that the color of `cube` will be as colors list (in same index)? — לבני מלכה, Nov 05 '18 at 13:46
i am using the hard coded value for my background color. I just want the index value. for now leave about the background color. — Chandra Shekhar, Nov 05 '18 at 13:51
no not working https://www.sassmeister.com check your code here. — Chandra Shekhar, Nov 05 '18 at 14:00

score 10 · Accepted Answer · answered Nov 05 '18 at 14:02

This is what you need:

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

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

Your's fails cause index($colors,$color) will return always the first position of the element: Read ->http://sass-lang.com/documentation/Sass/Script/Functions.html#index-instance_method

How to Find the SCSS Index of the element in the list?

1 Answers1

Linked