<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
@each $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;
  }
}