<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>
// colors
$colors: darkslateblue mediumorchid seagreen steelblue;

// loop!
@each $color in $colors {
  .#{$color} {
    background: $color;
  }
}


// styles
body {
  display: flex;
}

div {
  flex: 1 1 auto;
  height: 100vh;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.