@each

Die @each-Regel erleichtert das Ausgeben von Stilen oder die Auswertung von Code für jedes Element einer Liste oder jedes Paar in einer Map. Sie eignet sich hervorragend für wiederkehrende Stile, die nur geringfügige Unterschiede aufweisen. Sie wird normalerweise als @each <variable> in <expression> { ... } geschrieben, wobei der Ausdruck eine Liste zurückgibt. Der Block wird nacheinander für jedes Element der Liste ausgewertet, das der angegebenen Variablen zugewiesen wird Name.

Spielplatz

SCSS-Syntax

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
Spielplatz

Sass-Syntax

$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size

CSS-Ausgabe

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

Mit MapsMit Maps Permalink

Sie können @each auch verwenden, um jede Schlüssel/Wert-Paarung in einer Map zu durchlaufen, indem Sie sie als @each <variable>, <variable> in <expression> { ... } schreiben. Der Schlüssel wird der ersten Variablen zugewiesen und das Element der zweiten.

Spielplatz

SCSS-Syntax

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}
Spielplatz

Sass-Syntax

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph

CSS-Ausgabe

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
}

DestrukturierungDestrukturierung Permalink

Wenn Sie eine Liste von Listen haben, können Sie @each verwenden, um automatisch Variablen für jeden der Werte aus den inneren Listen zuzuweisen, indem Sie sie als @each <variable...> in <expression> { ... } schreiben. Dies wird als Destrukturierung bezeichnet, da die Variablen der Struktur der inneren Listen entsprechen. Jedem Variablennamen wird der Wert an der entsprechenden Position in der Liste zugewiesen oder null, wenn die Liste nicht genügend Werte enthält.

Spielplatz

SCSS-Syntax

$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}
Spielplatz

Sass-Syntax

$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px




@each $name, $glyph, $size in $icons
  .icon-#{$name}:before
    display: inline-block
    font-family: "Icon Font"
    content: $glyph
    font-size: $size

CSS-Ausgabe

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f112";
  font-size: 12px;
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12e";
  font-size: 16px;
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "\f12f";
  font-size: 10px;
}

💡 Lustige Tatsache

Da @each Destrukturierung unterstützt und Maps als Listen von Listen zählen, funktioniert die Map-Unterstützung von @each, ohne dass eine spezielle Unterstützung für Maps im besonderen erforderlich ist.