Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul>
  <li class="social-link social-link--twitter"><a href="#">twitter</a></li>
  <li class="social-link social-link--facebook"><a href="#">facebook</a></li>
  <li class="social-link social-link--linkedin"><a href="#">linkedin</a></li>
  <li class="social-link social-link--googleplus"><a href="#">google+</a></li>
  <!--<li class="social-link social-link--flickr"><a href="#">flickr</a></li>-->
  <!--<li class="social-link social-link--pinterest"><a href="#">pinterest</a></li>-->
  <!--<li class="social-link social-link--skype"><a href="#">skype</a></li>-->
  <li class="social-link social-link--RSS"><a href="#">RSS</a></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

// Variables for 'social network' colours
$Twitter: #41b7d8;
$FB: #3b5997;
$GPlus: #d64937;
$LinkedIn: #0073b2;
$Flickr: #ff0084;
$Pinterest: #cb2027;
$Skype: #00aff0;
$RSS: #e0812a;

/*
 *  Housekeeping, resetting stuff
 */
ul {
  padding: 0;  
}
li {
  float: left;
  list-style: none;
}

.social-link {
  font-family: verdana, arial, helvectica, sans-serif;
  height: 44px;
  letter-spacing: 1px;
  line-height: 44px;
  margin-left: 0.3%;
  position: relative;

  width: 12.5%;
  &:first-child {
    margin-left: 0;
  }
  &:before {
    background-color: white;
    content: '';
    height: 36px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 36px;
  }
  a {
    color: #FFF;
    display: block;
    padding-left: 55px;
    text-shadow: 1px 1px 0 rgba(black, 0.4);
    text-transform: uppercase;
    text-decoration: none;
  }
}

/*
 * Here lies the sexy Sass 3.3 stuff
 */

$social:  (twitter, $Twitter),
          (facebook, $FB),
          (linkedin, $LinkedIn),
          (RSS, $RSS),
          (googleplus, $GPlus);

@each $social, $color in $social {
  .social-link--#{$social} {
    background-color: $color;
    transition: background-color, .2s, ease-in;
    &:focus,
    &:hover {
      background-color: darken($color,5%);
    }    
    &:before {
      background-image: url('/images/#{$social}.png');
    }
  }
}

SassMeister-output.css

/*
 *  Housekeeping, resetting stuff
 */
ul {
  padding: 0;
}

li {
  float: left;
  list-style: none;
}

.social-link {
  font-family: verdana, arial, helvectica, sans-serif;
  height: 44px;
  letter-spacing: 1px;
  line-height: 44px;
  margin-left: 0.3%;
  position: relative;
  width: 12.5%;
}
.social-link:first-child {
  margin-left: 0;
}
.social-link:before {
  background-color: white;
  content: '';
  height: 36px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 36px;
}
.social-link a {
  color: #FFF;
  display: block;
  padding-left: 55px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  text-decoration: none;
}

/*
 * Here lies the sexy Sass 3.3 stuff
 */
.social-link--twitter {
  background-color: #41b7d8;
  transition: background-color, .2s, ease-in;
}
.social-link--twitter:focus, .social-link--twitter:hover {
  background-color: #2cafd4;
}
.social-link--twitter:before {
  background-image: url("/images/twitter.png");
}

.social-link--facebook {
  background-color: #3b5997;
  transition: background-color, .2s, ease-in;
}
.social-link--facebook:focus, .social-link--facebook:hover {
  background-color: #344e85;
}
.social-link--facebook:before {
  background-image: url("/images/facebook.png");
}

.social-link--linkedin {
  background-color: #0073b2;
  transition: background-color, .2s, ease-in;
}
.social-link--linkedin:focus, .social-link--linkedin:hover {
  background-color: #006399;
}
.social-link--linkedin:before {
  background-image: url("/images/linkedin.png");
}

.social-link--RSS {
  background-color: #e0812a;
  transition: background-color, .2s, ease-in;
}
.social-link--RSS:focus, .social-link--RSS:hover {
  background-color: #d2741f;
}
.social-link--RSS:before {
  background-image: url("/images/RSS.png");
}

.social-link--googleplus {
  background-color: #d64937;
  transition: background-color, .2s, ease-in;
}
.social-link--googleplus:focus, .social-link--googleplus:hover {
  background-color: #ca3c29;
}
.social-link--googleplus:before {
  background-image: url("/images/googleplus.png");
}

SassMeister-rendered.html

<ul>
  <li class="social-link social-link--twitter"><a href="#">twitter</a></li>
  <li class="social-link social-link--facebook"><a href="#">facebook</a></li>
  <li class="social-link social-link--linkedin"><a href="#">linkedin</a></li>
  <li class="social-link social-link--googleplus"><a href="#">google+</a></li>
  <!--<li class="social-link social-link--flickr"><a href="#">flickr</a></li>-->
  <!--<li class="social-link social-link--pinterest"><a href="#">pinterest</a></li>-->
  <!--<li class="social-link social-link--skype"><a href="#">skype</a></li>-->
  <li class="social-link social-link--RSS"><a href="#">RSS</a></li>
</ul>