[英]SCSS @each loop with two variable sets?
Trying SCSS to work with two variable sets, like below, but it keeps returning the crazy sauce below: 尝试将SCSS与两个变量集一起使用,如下所示,但它不断返回下面的疯狂信息:
$first: first_1 first_2;
$second: second_1 second_2
@each $data in $first {
@each $content in $second {
.example-class[data-reactid$='#{$data}'] {
&:before {
content: '#{$content}';
}
}
}
} }
So, it does this: 因此,它这样做:
.example-class[data-reactid$='first_1']:before {
content: "second_1";
}
.example-class[data-reactid$='first_1']:before {
content: "second_2";
}
.example-class[data-reactid$='first_2']:before {
content: "second_1";
}
.example-class[data-reactid$='first_2']:before {
content: "second_2";
}
And I want it to just do this: 我希望它只是这样做:
.example-class[data-reactid$='first_1']:before {
content: "second_1";
}
.example-class[data-reactid$='first_2']:before {
content: "second_2";
}
What am I doing wrong? 我究竟做错了什么?
Rather than use nested loops, what you want to do is use the zip function to zip your lists together. 您要做的不是使用嵌套循环,而是使用zip函数将列表压缩在一起。 The zip function creates a list of lists where the first, second, etc. element of each list is paired up together: zip函数创建一个列表列表,其中每个列表的第一个,第二个等元素配对在一起:
$first: first_1 first_2;
$second: second_1 second_2;
@each $k, $v in zip($first, $second) {
.example-class[data-reactid$='#{$k}'] {
&:before {
content: '#{$v}';
}
}
}
Output: 输出:
.example-class[data-reactid$='first_1']:before {
content: "second_1";
}
.example-class[data-reactid$='first_2']:before {
content: "second_2";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.