SCSS @each loop with two variable sets?

Question

Trying SCSS to work with two variable sets, like below, but it keeps returning the 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, 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?

Answer 1

Rather than use nested loops, what you want to do is use the zip function to zip your lists together. The zip function creates a list of lists where the first, second, etc. element of each list is paired up 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";
}