<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.