<ul class="social">
  <li>
    <a href="https://www.facebook.com/me/">
      Facebook
    </a>
  </li>
  <li>
    <a href="https://www.twitter.com/me/">
      Twitter
    </a>
  </li>
  <li>
    <a href="https://www.linkedin.com/me/">
      LinkedIn
    </a>
  </li>
  <li>
    <a href="https://plus.google.com/me/">
      Google+
    </a>
  </li>
</ul>

// establish social media colors
social = {
  'facebook': #3b5999,
  'twitter': #55acee,
  'linkedin': #0077B5,
  'google': #dd4b39,
}

// loop, to style social media links
for name, color in social
  // selector based on href name
  [href*={name}]
    background: color
        
    &::before
      content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/' + name + '.png')


// styles
ul {
  margin: 0 auto;
  max-width: 30rem;
}

a {
  border: 4px solid black;
  border-radius: 6px;
  color: black;
  display: block;
  font-weight: bold;
  margin: 0.25rem;
  padding: 0.5rem;
  text-decoration: none;
  
  &::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5em;
  }
}