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

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -