SCSS @each循環有兩個變量集？

Question

嘗試將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}';
        }
    }

}

}

因此，它這樣做：

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

我希望它只是這樣做：

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

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

我究竟做錯了什么？

Answer 1

您要做的不是使用嵌套循環，而是使用zip函數將列表壓縮在一起。 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}';
        }
    }
}

輸出：

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

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