[英]Sass nested lists index error on each loop when using nth?
So I'm trying to get the following result in CSS using the below Sass code: 因此,我尝试使用以下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;
}
And so on and so forth for each of the categories (this is for WordPress). 对于每个类别,依此类推(对于WordPress)。
Here's the 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)};
}
}
}
}
I keep getting Error: List index is 2 but list is only 1 item long for nth
我不断收到Error: List index is 2 but list is only 1 item long for nth
You're not passing a list to nth()
, you're passing a string. 您没有将列表传递给nth()
,而是传递了一个字符串。 Instead of passing the $cat-prop-val
list to nth()
, you're passing the literal string "$cat-prop-val"
. 而不是将$cat-prop-val
列表传递给nth()
,而是传递文字字符串"$cat-prop-val"
。 When you use the string interpolation syntax ( #{}
), all you're ever going to get is a string. 当使用字符串插值语法( #{}
)时,您将获得的只是一个字符串。 So, don't do that unless you want a string. 因此,除非需要字符串,否则不要这样做。
@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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.