<ul class="social">
    <a href="https://www.facebook.com/me/">
    <a href="https://www.twitter.com/me/">
    <a href="https://www.linkedin.com/me/">
    <a href="https://plus.google.com/me/">
// establish social media colors
  '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

// 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;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.