nth child testing

fiddling with nth child

by Laurel Bruggeman

HTML

<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

SCSS

@for $i from 1 to 100 {
   #list li:nth-child(#{$i}) {
     background-color: rgb($i*100, $i*20, $i*20)
   }
}

#list li {
  display: block;
  width: 10px;
  height: 10px;
  margin-bottom: 10px;
  background-color: red;
  transition: all 2s;
}