CODEWITHSUNDEEP
csssass
fidev
fidev

Reputation: 1252

sass @each loop with multiple lists

developing in scss

I have the two variable lists:

$ids: 21, 33, 73;
$colors: #fff, #000, #333;

and the following @each loop.

@each $id, $color in ($ids, $colors) {
    .category--#{$id},
    .post--#{$id} {
       color: #{$color};
    }
}

I want to display the following

.category--21,
.post--21 {
    color: #fff
}

.category--33,
.post--33 {
    color: #000
}

.category--73,
.post--73 {
    color: #333
}

But I'm getting this instead

.category--21,
.post--21 {
    color: 33;
}

.category--#fff,
.post--#fff {
    color: #000;
}

Unsure of my structure. Obviously I have much longer variables lists (just added 3 to each one for demo purposes).

Any constructive feedback welcome. Thanks

Upvotes: 4

Views: 4393

Answers (2)

Harry
Harry

Reputation: 89750

Based on my understanding, I think @each is not the correct option for you as you don't have the key and value pair as one item. Below is what the documentation says about @each: (emphasis is mine)

The @each directive can also use multiple variables, as in @each $var1, $var2, ... in <list>. If <list> is a list of lists, each element of the sub-lists is assigned to the respective variable.

As you can see from the above statement, in your case the $ids would be treated as one list and the $colors would be treated as another. It means that

  • 1st iteration $id is 21, $color is 33 and 73 not assigned
  • 2nd iteration $id is #fff, $color is #000 and #333 is not assigned.

It might be better for you to use the @for loop like in the below snippet:

$ids: 21, 33, 73;
$colors: #fff, #000, #333;

@for $i from 1 through length($ids) {
  $id: nth($ids, $i);
  $color: nth($colors, $i);
    .category--#{$id},
    .post--#{$id} {
       color: #{$color};
    }
}

Upvotes: 3

twxia
twxia

Reputation: 1813

Hi you misuse it :D @each is iterate list by list see below

$pair: (21, #fff), (33, #000), (73, #333);

@each $id, $color in $pair {
    .category-#{$id},
    .post-#{$id} {
       color: #{$color};
       height: 20px;
    }
}

doc reference: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign

Upvotes: 3

Related Questions