Sass: Silent class generator

Generate a solid and a silent class in one go.

by csswizardry

HTML

<p class="foo  foo--bar">Foo bar baz</p>

<p class="bar">Foo bar baz</p>

SCSS

/**
 * Generate a solid class (for use in markup) and a silent class (for use with
 * `@extend`) in one go.
 */
@mixin class($name) {
    .#{$name},
    %#{$name} {
        @content
    }
}





@include class(foo) {
    color: red;

    &:hover {
        color: black;
    }

}

@include class(foo--bar) {
    font-weight: bold;
}

.bar {
    @extend %foo;
    @extend %foo--bar;
}