Last Updated: February 25, 2016
·
180
· crazydesignsuk

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%);
        }    
    }
}

better formatted with gist