Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
DRY sass example
// Allow mixins that share common properties in a single css rule
// store autogenerated selectors that map
$Placeholder-Selectors: ();
@mixin button($color, $extend: true) {
@include button-static($extend);
background-color: $color;
border-color: mix(black, $color, 25%);
&:hover {
background-color: mix(black, $color, 15%);
border-color: mix(black, $color, 40%);
@mixin button-static($extend: true) {
$button-selector: map-get($Placeholder-Selectors, 'button');
@if $extend == true {
@if $button-selector == null {
// create a unique placeholder selector
$button-selector: unique-id();
$Placeholder-Selectors: map-merge($Placeholder-Selectors, ('button': $button-selector)) !global;
// add a placeholder class that includes this mixin properties
@at-root %#{$button-selector} {
@include button-static(false);
// default behavior is to extend the placeholder
@extend %#{$button-selector};
@else {
border: 1px solid;
border-radius: 5px;
padding: .25em .5em;
&:hover {
cursor: pointer;
// Use
.foo {
@include button(#f00);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment