Skip to content

Instantly share code, notes, and snippets.

@vanessa
Created June 7, 2018 04:08
Show Gist options
  • Save vanessa/233e5875f4572f11dc72326dd1c6c850 to your computer and use it in GitHub Desktop.
Save vanessa/233e5875f4572f11dc72326dd1c6c850 to your computer and use it in GitHub Desktop.
Easily generate classes of buttons using SASS
$social-share-colors: (
'facebook' : '#3b5999',
'linkedin' : '#0077B5',
'googleplus' : '#dd4b39',
'twitter' : '#55acee'
);
@mixin share-button-colors {
@each $social, $value in $social-share-colors {
&.is-#{$social} {
background: #{$value};
border-color: #{$value};
&.has-outline {
color: #{$value};
}
}
}
}
.social-share-button {
padding: 3px 10px;
@include share-button-colors;
}
/*
This could be used with something like:
<button class="social-share-button is-facebook">Share to Facebook</button>
/*
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment