Sass @each Loops

If you’ve got a Sass Map or Lists you can loop through them, rather than addressing each key separately. At the beginning of the @each loop, you assign a variable to be used inside the loop:

$shapes: triangle, square, circle;

@each $shape in $shapes {
  .icon-#{$shape} {
    background-image: url('/images/#{$shape}.jpg');
  }
}

$map: (
  h1: 20px,
  h2: 16px,
  h3: 14px
);

@each $element, $size in $map {
  #{$element} {
    font-size: $size;
  }
}

If concatenating the variable with a string, or using it as a class/element, the variable will need to be preceded with a #{ and prepended with a } to tell the compiler you actually mean the variable.

You are also able to nest loops inside of loops, if your map is multi levels deep.