Meerdere waarden in de @each directive in SASS

De @each directive kan worden gebruikt om meer complexe stijllijsten samen te stellen. Hiervoor schrijven we meerdere variabelen, en in de lijst met elementen voegen we extra waarden toe.

Laten we het volgende voorbeeld bekijken:

styles.scss@each $picture, $color, $padding in
  (winter, blue, 10px),
  (spring, green, 12px),
  (summer, yellow, 14px),
  (autumn, brown, 16px) {
    img.#{$picture} {
      background-image: url('/images/#{$picture}.png');
      border: 4px solid $color;
      padding: $padding ;
    }
  }

Compilatieresultaat:

styles.cssimg .winter {
  background-image: url("/images/winter.png");
  border: 4px solid blue;
  padding: 10px;
}

img .spring {
  background-image: url("/images/spring.png");
  border: 4px solid green;
  padding: 12px;
}

img .summer {
  background-image: url("/images/summer.png");
  border: 4px solid yellow;
  padding: 14px;
}

img .autumn {
  background-image: url("/images/autumn.png");
  border: 4px solid brown;
  padding: 16px;
}

Ook door meervoudige toewijzing te gebruiken kan men waardeparen toevoegen aan de lijst:

styles.scss@each $elem, $font-size in (div: 14px, p: 12px) {
  #{elem} {
    font-size: $font-size;
  }
}

Laten we nu naar het resulterende resultaat kijken:

styles.cssdiv {
  font-size: 14px;
}

p {
  font-size: 12px;
}

styles.scss@each $elem, $size, $color in 
(navbar: 14px blue, link: 12px red, span: 10px green) {
  #{$elem} {
      font-size: $size;
      color: $color;
  }
}