divLikeBelt03.scss

$border: #eee 2px dashed;
$nameList: belt1, belt2, belt3, belt4;
$colorList: #3f171d, #573121, #774635, #b20008;
$degList: 15deg, -15deg, 25deg, -10deg;
$translateList: 0vh, -10vh, 50vh, 40vh;

body {
  background-color: #eee;
  overflow: hidden;
  background-image: url('bg.jpg');
  -webkit-background-size: cover;
  background-size: cover;

  & div {
    @each $class in $nameList {
      $index : index($nameList, $class);
      &.#{$class} {
        box-sizing: border-box;
        margin-left: -200%;
        padding-top: 10px;
        width: 500%;
        height: 100px;
        background-color: nth($colorList, $index);
        box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, .4);

        -webkit-transform: translate(0, nth($translateList, $index)) rotateZ(nth($degList, $index));
        transform: translate(0, nth($translateList, $index)) rotateZ(nth($degList, $index));

        &:after {
          content: "";
          display: block;
          height: 80px;
          border-top: $border;
          border-bottom: $border;
        }
      }
    }
  }
}