Sass each loop for color variables as classes
// variables
$social-dribbble: #ea4c89;
$social-facebook: #3b5998;
$social-google: #dd4b39;
$social-instagram: #517fa4;
$social-twitter: #00aced;
$social-vimeo: #aad450;
$social-youtube: #bb0000;
$social-linkedin: #007bb6;
$social-flickr: #ff0084;
// define the list (networkname, variable)
$social:
(dribbble, $social-dribbble),
(facebook, $social-facebook),
(google, $social-google),
(instagram, $social-instagram),
(twitter, $social-twitter),
(vimeo, $social-vimeo),
(youtube, $social-youtube),
(linkedin, $social-linkedin),
(flickr, $social-flickr);
// loop it!
@each $networkname, $color in $social {
.social--#{$networkname} {
background-color: $color;
@include transition(0.1s);
&:focus, &:hover {
background-color: darken($color,10%);
}
}
}
Written by Craig Francies
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Tags
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#