Sass @each Loops

SassMapまたはListsがある場合は、各キーを個別にアドレス指定するのではなく、それらをループできます。 @each ループの開始時に、ループ内で使用する変数を割り当てます。

$shapes: triangle, square, circle;

@each $shape in $shapes {
  .icon-#{$shape} {
    background-image: url('/images/#{$shape}.jpg');
  }
}

$map: (
  h1: 20px,
  h2: 16px,
  h3: 14px
);

@each $element, $size in $map {
  #{$element} {
    font-size: $size;
  }
}

変数を文字列と連結する場合、またはクラス/要素として使用する場合は、変数の前に#{を付け、前に}を付けて、コンパイラにを通知する必要があります。実際には変数を意味します。

マップがマルチレベルの深さである場合は、ループをループ内にネストすることもできます。