SCSS Profile Links Fade Colour

Iteratively Fade Colour Sass Loop

by Ben Graham

HTML

<ul id="links">
  <li><a href="https://bengraham.io" class="links1">Ben's Site</a></li>
  <li><a href="https://www.behance.net/bengraham/" class="links2">Behance</a></li>
  <li><a href="https://www.facebook.com/bengraham8888" class="links3">Facebook</a></li>
  <li><a href="https://www.linkedin.com/in/bsg88/" class="links4">LinkedIn</a></li>
  <li><a href="https://www.instagram.com/bengrahamprints" class="links5">Instagram</a></li>
  <li><a href="https://soundcloud.com/write-the-sound" class="links6">SoundCloud</a></li>
</ul>

SCSS

$brand-primary: #0000ff;

li{
  list-style: none;
}

@for $i from 1 through 6 {
  .links#{$i} {
    color: lighten($brand-primary, $i*7);
    text-decoration: none;
    font-size: 1.2rem;
    font-family: helvetica;
    line-height: 2.2rem;
  }
}