Table of Contents

URL: https://www.progressiverobot.com/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.