Sass вложенные индексные ошибки индекса в каждом цикле при использовании nth?

57
5

Поэтому я пытаюсь получить следующий результат в CSS, используя следующий код Sass:

.term-formal-wear .products .title, .term-fw-fall-winter .products .title, .term-fw-spring-summer .products .title {
background-color: #d4af37;
}
.term-formal-wear .products .title h2, .term-fw-fall-winter .products .title h2, .term-fw-spring-summer .products .title h2 {
color: #000;
}

И так далее и т.д. Для каждой из категорий (это для WordPress).

Здесь Сасс:

$cat-prop-vals: (
(formal-wear, fw, $cieanna-gold, #000),
(night-wear, nw, $cieanna-rose-gold, #000),
(ready-to-wear, rtw, $cieanna-dark-gray, #fff),
(sports-wear, sw, #000, #fff)
);

@each $cat-prop-val in $cat-prop-vals {
.term-#{nth(#{$cat-prop-val}, 1)}, .term-#{nth(#{$cat-prop-val}, 2)}-fall-winter, .term-#{nth(#{$cat-prop-val}, 2)}-spring-summer {
& .products .title {
background-color: #{nth(#{$cat-prop-val}, 3)};
h2 {
color: #{nth(#{$cat-prop-val}, 4)};
}
}
}
}

Я продолжаю получать Error: List index is 2 but list is only 1 item long for nth

спросил(а) 2015-01-31T15:11:00+03:00 5 лет, 7 месяцев назад
1
Решение
58

Вы не передаете список в nth(), вы передаете строку. Вместо передачи списка $cat-prop-val в nth() вы передаете литеральную строку "$cat-prop-val". Когда вы используете синтаксис строковой интерполяции (#{}), все, что вы когда-либо собираетесь получить, это строка. Таким образом, не делайте этого, если вы не хотите строку.

@each $cat-prop-val in $cat-prop-vals {
.term-#{nth($cat-prop-val, 1)}, .term-#{nth($cat-prop-val, 2)}-fall-winter, .term-#{nth($cat-prop-val, 2)}-spring-summer {
// stuff
}
}

ответил(а) 2015-01-31T15:20:00+03:00 5 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема