Sass @Each with Multiple Variables

Sass @each with multiple variables

I'm in the same boat (beginner to Sass/Compass) and had to do something similar. Here's what I came up with, using nested lists:

$flash_types: (success #d4ffd4) (error #ffd5d1);

@each $flash_def in $flash_types {
    $type: nth($flash_def, 1);
    $colour: nth($flash_def, 2);

    &.#{$type} {
        background-color: $colour;
        background-image: url(../images/#{$type}.png);
    }
}

It's not the most elegant solution but it should work if you can't find anything else. Hope it helps! I'd appreciate a better method too :)

sass @each loop with multiple lists

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

Multiple variables in SASS @each statement

Got it sorted out, my gut tells me there's a more efficient way, but here tis.

$rowTypes: (red #8f1324 #fff) (black #8f1324 #fff) (grey #ccc #000) (white #fff #000);

 @each $row in $rowTypes {
   $names: nth($row, 1);
   $bgColor: nth($row, 2);
   $txtColor: nth($row, 3);

.titleRow#{$names} {
    text-align: center;
    height: auto;
    overflow: hidden;
    background-color: $bgColor;
    .content {
        bottom: 0;
        width: 100%;
        color: $txtColor;
        padding: 0 30px 25px;
        h1 {
            @include sectionH1 ($txtColor);
            font-size: 60px;
        }
        .subtitle {
            line-height: 30px;
            padding: 15px 0 0 0;
        }
    }
    .fa {
        font-size: 30px;
        color: #fff;
        left: 50%;
        margin: 18px 0 0 0;
    }
  }
}

SASS/SCSS @each multiple arrays

Here's a DEMO

If you need to keep your values separate, in 2 lists, then you can...

// loop over $buttonNames
@each $buttonName in $buttonNames {
  // Find the current index of $buttonNames...
  $index: index($buttonNames, $buttonName);
                                  // ... to pull the right from $buttonColors
  @include underlineButton('btn', $buttonName, 3, nth($buttonColors, $index));
}

However, using a map is a little easier.

$buttons: (
  'black': black,
  'primary': blue,
  'red': red,
  'green': green
);

@each $buttonName, $color in $buttons  {
    @include underlineButton('btn', $buttonName, 3, $color)
}

Using a sass variable in an @each loop

And I realized I overcomplicated it. You don't need any extra functions because the @each is designed to work with maps and iterating over multiple values.

$cool: blue;
$mad: red;

$colors: (
  cool: $cool,
  mad: $mad
);

.prfx-color {
  @each $key, $val in $colors {
    &--#{$key} {
      background-color: $val;

      &::after { content: "$#{$key}"; }
    }
  }
}

SCSS for each loop with Multiple Variables with decimal values

You could round the value for the class name:

@each $proportion in $columns {
  .col_#{floor(nth($proportion, 1))} {
    width: percentage($proportion/100);
  }
}

Output:

.col_100 {
  width: 100%;
}

.col_25 {
  width: 25%;
}

.col_33 {
  width: 33.333%;
}

SCSS @each loop with two variable sets?

Rather than use nested loops, what you want to do is use the zip function to zip your lists together. The zip function creates a list of lists where the first, second, etc. element of each list is paired up 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";
}

---

Related Topics