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.

Author: Mike Street

Mike Street

Mike is a front-end developer for Brighton agency Liquid Light. When not writing copious amounts of CSS he can be found cycling with around Sussex or making an arduino blink.

Find Mike at

✖ Clear

🕵 Search Results

🔎 Searching...