Sass @each

Watch "Going through a list with @each" on LinkedIn Learning

The @each makes it easy to output styles or evaluate a block of code for each element in a list or each key value pair in a map.

$colors: red, blue, green, orange;

%box {
  display: inline-block;
  width: 100px;
  height: 100px;
}

@each $color in $colors {
  .box-#{$color} {
    @extend %box;
    background-color: $color;
  }
}

Try it yourself on Sassmeister