lundi 5 novembre 2018

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

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:red;
  };
}

The Output of the above program is

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

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

.cube:nth-child(1) {    // issue here
  background: red;
}

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

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

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



Aucun commentaire:

Enregistrer un commentaire