The SCSS @for directive is great when we know how many iterations are required and we only need 1 variable. What if we need multiple variables to iterate over data sets? Hello SCSS maps and the @each control directive! In this lesson, we’ll check out iterating with lists and looping over data sets with maps and the @each directive.

 

// work with simple array$superheroes: wonder-woman, spiderman, batman, superman;@each $hero in $superheroes {  .#{$hero}-logo {    content: "#{$hero}";  }}// we get.wonder-woman-logo {  content: "wonder-woman"; }.spiderman-logo {  content: "spiderman"; }.batman-logo {  content: "batman"; }.superman-logo {  content: "superman"; }

 

key: value pairs using map-get():

// work with key: value pair$breakpoints: (sm: 375px, md: 768px, lg: 1200px);$container-widths: (sm: 250px, md: 500px, lg: 750px);@each $size, $bp in $breakpoints {  @media only screen and (min-width: $bp) {    .container-width {      // because $breakpoints and $container-widths have the same key      // we can use map_get(target_ary, key) to get value      width: map_get($container-widths, $size);    }  }}// we get@media only screen and (min-width: 375px) {  .container-width {    width: 250px; } }@media only screen and (min-width: 768px) {  .container-width {    width: 500px; } }@media only screen and (min-width: 1200px) {  .container-width {    width: 750px; } }

 

index: values pair using nth()

$hero-media:  (1 375px 768px crimson),              (2 768px 1000px darkred),              (3 1200px 1400px grey),              (4 768px 1200px blue);// we get@media only screen and (min-width: 375px) and (max-width: 768px) {  .wonder-woman {    background-color: crimson; } }@media only screen and (min-width: 768px) and (max-width: 1000px) {  .spiderman {    background-color: darkred; } }@media only screen and (min-width: 1200px) and (max-width: 1400px) {  .batman {    background-color: grey; } }@media only screen and (min-width: 768px) and (max-width: 1200px) {  .superman {    background-color: blue; } }