DRY sass example

dry-example.scss

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