@each

@each規則を使用すると、リストの各要素またはマップの各ペアに対して、スタイルを発行したり、コードを評価したりすることが簡単になります。これは、わずかなバリエーションしかない反復的なスタイルに最適です。通常、@each <変数> in <式> { ... }と記述します。ここで、式はリストを返します。ブロックは、リストの各要素について順番に評価され、指定された変数名に割り当てられます。

プレイグラウンド

SCSS 構文

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

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
プレイグラウンド

Sass 構文

$sizes: 40px, 50px, 80px

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

CSS 出力

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

マップを使用する場合マップを使用する場合のパーマリンク

@eachを@each <変数>, <変数> in <式> { ... }と記述することにより、マップ内のすべてのキー/値ペアを反復処理することもできます。キーは最初の変数名に割り当てられ、要素は2番目の変数名に割り当てられます。

プレイグラウンド

SCSS 構文

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

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}
プレイグラウンド

Sass 構文

$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 出力

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

分割代入分割代入のパーマリンク

リストのリストがある場合、@each <変数...> in <式> { ... }と記述することで、内側のリストの値のそれぞれに自動的に変数を割り当てるために@eachを使用できます。これは、変数が内側のリストの構造と一致するため、分割代入と呼ばれます。各変数名は、リスト内の対応する位置にある値に割り当てられるか、リストに十分な値がない場合はnullに割り当てられます。

プレイグラウンド

SCSS 構文

$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;
  }
}
プレイグラウンド

Sass 構文

$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 出力

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

💡 豆知識

@eachは分割代入をサポートしており、マップはリストのリストとしてカウントされるため、@eachのマップサポートは、特にマップに対する特別なサポートを必要とせずに機能します。