使用第n个时，每个循环上的Sass嵌套列表索引错误？答案

【问题标题】：Sass nested lists index error on each loop when using nth?使用第n个时，每个循环上的Sass嵌套列表索引错误？
【发布时间】：2015-03-30 20:18:36
【问题描述】：

所以我尝试使用以下 Sass 代码在 CSS 中获得以下结果：

.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 的）。

这是 Sass：

$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

【问题讨论】：

标签： css sass

【解决方案1】：

您没有将列表传递给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
    }
}

【讨论】：