$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; } }
<ul id="links"> <li><a href="http://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/benscottgraham/" class="links3">Facebook</a></li> <li><a href="https://www.linkedin.com/in/benjamin-graham/" class="links4">LinkedIn</a></li> <li><a href="https://www.instagram.com/bengraham_design/" class="links5">Instagram</a></li> <li><a href="https://soundcloud.com/write-the-sound" class="links6">SoundCloud</a></li> </ul>