<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,
;

// for loop to iterate over array
.each(@array, @i: 1) when (@i <= length(@array)) {
  // extract social names and colors
  @pair: extract(@array, @i);
  @name: extract(@pair, 1);
  @color: extract(@pair, 2);
  
  // 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');
    }
  }
  
  .each(@array, @i + 1);
}

// application
.each(@social);


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