nth-child dynamic left position

http://stackoverflow.com/q/43487915/962603

HTML

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

SCSS

.bar {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;
}

@for $i from 1 through 15 {
  .bar:nth-child($i) {
    left: ($i * 10px);
  }
}