Social Color Variables for Sass

When you’re creating custom social media buttons and links on your site, you need to use reliable colors for all the different social networks out there.

Below are a bunch of Sass variables I always throw into each of my projects and they always seem to come in handy. They’re actually the exact variables used to color the various social media elements on this site, like the sidebar follow links and the post share buttons.

//----- Social Colors
$social-twitter:  #55acee;
$social-facebook: #3b5998;
$social-dribbble: #ea4c89;
$social-google:   #dd4b39;
$social-linkedin: #0073B2;
$social-instagram:#3f729b;
$social-buffer:   #333333;
$social-rss:      #ee802f;

Also, I know that RSS isn’t actually a social network, so the naming of the variables gets a little funny with that one. However, I’ve found this works well overall and makes it obvious what each variable is for. Makes much more sense than simply $twitter or $facebook.

Follow IP on Twitter Like IP on Facebook

Advertisement