====Директива @each====

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

Директива @each устанавливает $var в каждое из значений списка или карты и выводит содержащиеся в ней стили, используя соответствующее значение $var. Например:
<sxh scss>
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
</sxh>

компилируется в

<sxh css>
.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'); }
</sxh>