SCSS @each循环有两个变量集?

时间:2016-01-27 19:57:50

标签: css sass

尝试使用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";
}

我做错了什么?

1 个答案:

答案 0 :(得分:2)

您不想使用嵌套循环,而是使用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";
}