Директива @each

Директива @each обычно имеет вид @each $var in <список или карта значений>. $var может быть любой переменной, такой как $length или $name, и <список или карта значений> - это выражение SassScript, возвращающее список или карту значений.

Директива @each устанавливает $var в каждое из значений списка или карты и выводит содержащиеся в ней стили, используя соответствующее значение $var. Например:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@each $animal in puma, sea-slug, egret, salamander
  .#{$animal}-icon
    background-image: url('/images/#{$animal}.png')

.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}