« Back to Index

Example of how Sass mixins when used excessively and without thought can actually be more of a code smell than a helper.

View original Gist on GitHub

Maintainability.md

We had multiple mixins for prefixing properties such as:

• border-box
• border-radius
• box-shadow
• …on and on…

When realistically we just needed…

@mixin vendor ($property, $value) {
    -webkit-#{$property}: $value;
       -moz-#{$property}: $value;
        -ms-#{$property}: $value;
         -o-#{$property}: $value;
            #{$property}: $value;
}

…which you would use as for example: @include vendor(box-sizing, border-box);

Yes this adds prefixes that might not be needed (e.g. border-radius is reasonably well supported in older versions of Firefox and WebKit) but this repeatable content will get chewed up when it comes to GZIP’ing.