css - SCSS @each loop with two variable sets? -
trying scss work 2 variable sets, below, keeps returning crazy sauce below:
$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, 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 want this:
.example-class[data-reactid$='first_1']:before { content: "second_1"; } .example-class[data-reactid$='first_2']:before { content: "second_2"; } what doing wrong?
rather use nested loops, want use zip function zip lists together. zip function creates list of lists first, second, etc. element of each list paired together:
$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"; }
Comments
Post a Comment