SCSS получить следующий элемент массива?

Question

[Михаил Р.]

Приветствую!

Имеется массив:

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

Запускаю цикл и получаю ошибку

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

. Я понимаю, что он ругается на то, что не существует 6 элемента в массиве, но как тогда получать следующие элементы массива?

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

Comments

[iBird Rose]

а что по твоей логике должно получиться? на последнем элементе какой цвет должен быть?

[Михаил Р.]

iBird Rose, по идее должно выдать вроде false или null, ну что бы это можно было в условии отлавливать...

[iBird Rose]

Mike Ro, какое false? это обычный css, а не язык программирования. хочешь нормальную логику делать - делай через js

[Михаил Р.]

iBird Rose, ну так есть функции в sass, которые выдают null, например index(1px solid red, dashed); // null
В любом случае, я привел пример того, что пытаюсь реализовать, собственно, что я и написал в вопросе. Это просто пример, для наглядности моего вопроса...

Answer 1

[sergski]

По логике кода, вы берете первую позицию, увеличиваете на 1 и обращаетесь по этой позиции в списке. Ну логично он ругается. Зачем так делаете, т.е. какой вам css на выходе нужен?

Comments

[Михаил Р.]

Я понимаю, что он ругается на то, что не существует 6 элемента в массиве, но как тогда получать следующие элементы массива?

Словами не всегда можно доходчиво объяснить то, что именно хочется понять, поэтому я и написал цикл для наглядности своего вопроса. Разумеется, 6-ой / не существующий элемент я получить не пытаюсь.

На данный момент решил задачу сравнение настоящей позиции элемента в массиве с длинной всего массива. Не знаю, на сколько это грамотный способ...

Answer 2

[Павел Левин]

@for $i from 1 through length($arrayColors) { ... }

проверять длину и использовать $i в nth()