SCSS @each loop with two variable sets?
<p>Trying SCSS to work with two variable sets, like below, but it keeps returning the crazy sauce below:</p>

<pre><code> $first: first_1 first_2;
 $second: second_1 second_2
 @each $data in $first {
    @each $content in $second {
    .example-class[data-reactid$='#{$data}'] {
        &amp;:before {
          content: '#{$content}';
        }
    }

}
</code></pre>

<p>}</p>

<p>So, it does this:</p>

<pre><code>.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";
}
</code></pre>

<p>And I want it to just do this:</p>

<pre><code>.example-class[data-reactid$='first_1']:before {
  content: "second_1";
}

.example-class[data-reactid$='first_2']:before {
  content: "second_2";
}
</code></pre>

<p>What am I doing wrong?</p>