SCSS get next element of array?

Question

Sass

Greetings!
There is an array:

$arrayColors: (
        white,
        black,
        green,
        red,
        orange
);

I run the loop and get an error

List index is 6 but list is only 5 items long for 'nth'

. I understand that he swears that there are no 6 elements in the array, but how then to get the next elements of the array?

@each $color in $arrayColors {
      $realIndex: index($arrayColors, $color); // настоящий цвет
      $nextIndex: nth($arrayColors, ($realIndex + 1)); // следующий цвет
        .test-#{$realIndex} {
           color: $nextIndex;
        }
      }
}

Answer 1

According to the logic of the code, you take the first position, increment by 1, and access that position in the list. Well, logically, he swears. Why are you doing this, i.e. what css do you need for the output?