Skip to content

Instantly share code, notes, and snippets.

@drocarmo
Last active August 29, 2015 13:57
Show Gist options
  • Save drocarmo/9530384 to your computer and use it in GitHub Desktop.
Save drocarmo/9530384 to your computer and use it in GitHub Desktop.
Simple mixin to spits out specific social platform link styles. Just tie the class name to the markup. (example: http://drocarmo.com/)
/* Use-case output */
a.github {
color: #333333;
}
a.github:hover, a.github:active {
color: #1a1a1a;
}
a.rdio {
color: #006ed2;
}
a.rdio:hover, a.rdio:active {
color: #00539f;
}
a.twitter {
color: #00aced;
}
a.twitter:hover, a.twitter:active {
color: #0087ba;
}
// Variables
$behance: #1769ff;
$dribbble: #ea4c89;
$facebook: #3b5998;
$github: #333;
$instagram: #517fa4;
$linkedin: #007bb6;
$quora: #a82400;
$rdio: #006ed2;
$tumblr: #32506d;
$twitter: #00aced;
// Mixin
@mixin social($name, $color) {
&.#{$name} {
color: $color;
&:hover,
&:active {
color: darken($color, 10%);
}
}
}
// Use-case
a {
@include social(github, $github);
@include social(rdio, $rdio);
@include social(twitter, $twitter);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment