[SCSS] Loop Over Data with the SCSS @each Control Directive

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