<ul>
  <li><a href="https://www.facebook.com/andrea.barghigiani" class="profile-link--facebook profile-link">Facebook</a></li>
  <li><a href="https://plus.google.com/+AndreaBarghigiani/" class="profile-link--google profile-link">Google+</a></li>
  <li><a href="https://twitter.com/Andrea_AndMore" class="profile-link--twitter profile-link">Twitter</a></li>
  <li><a href="https://www.pinterest.com/andreaandmore/" class="profile-link--pinterest profile-link">Pinterest</a></li>
</ul>  
ul {
  font-family: Helvetica, sans-serif;
  list-style: none;
  margin: 50px auto;
  padding: 0;
  width: 20em;
  
  li {
    margin-bottom: 0.5em;
  }
}
.profile-link {
  background: #f2f2f2;
  border-radius: 3px;
  color: #4778b8;
  display: block;
  padding: 0.75em 1em;
  text-decoration: none;

  &:hover {
    color: #fff;
  }
}

//Dichiaro la Data Map
$profili: (
  facebook: #3b5998,
  google: #dd4b39,
  twitter: #00aced,
  pinterest: #cb2027
);

//Uso la Data Map cn @each
@each $profilo, $bg-color in $profili{
  .profile-link--#{$profilo}:hover{
    background-color: $bg-color;
  }
}
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.