JSON - Profile Links - SASS

Fading Colour of Links From JSON with Sass

by Ben Graham

HTML

<ul id="links">

</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;
  }
}

JavaScript

var info = {
  "full_name": "Ben Graham",
  "title": "Senior Consultant",
  "links": [{
    "Ben's Site": "https://bengraham.io"
  }, {
    "Behance": "https://www.behance.net/bengraham/"
  }, {
    "Facebook": "https://www.facebook.com/bengraham8888/"
  }, {
    "LinkedIn": "https://www.linkedin.com/in/bsg88/"
  }, {
    "Instagram": "https://www.instagram.com/bengrahamprints/"
  }, {
    "SoundCloud": "https://soundcloud.com/write-the-sound"
  }]
};

var output = '';

for (var i = 0; i <= info.links.length; i++) {
  for (key in info.links[i]) {
    if (info.links[i].hasOwnProperty(key)) {
      output += '<li>' +
        '<a href = "' + info.links[i][key] +
        '" class="links' + (i + 1) + '">' + key + '</a>' +
        '</li>';
    } // hasOwnProperty check
  } // for each object
} //for each array element

var update = document.getElementById('links');
update.innerHTML = output;