Sass basic technic

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<h1 class="h1">Sass basic technic</h1>

<div class="wrap">

  <div class="inner">
    <section class="section">
      <h2 class="h2 text-center">for loop<br>ー</h2>
      <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>  
      </div>
    </section>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">

SCSS

body {
	width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%);
}

.h1 {
  margin: 1.2em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.h2 {
  margin-bottom: 1em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding-right: 1em;
  padding-left: 1em;
	min-width: 300px;
}

.section {
  
}

.box {
  display: flex;
  justify-content: center;
}

.item {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: rgba(white,.35);
  animation: rotate 1.5s alternate infinite both;
  //
  @for $i from 2 through 5 {
    &:nth-child(#{$i}) {
      $delay: 0.3 * ($i - 1) + s;
      animation-delay: $delay;
    }
  }
  //
  + .item {
    margin-left: 2em;
  }
}

@keyframes rotate {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}