Skip to content

Instantly share code, notes, and snippets.

@Integralist
Created June 17, 2013 16:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Integralist/5798071 to your computer and use it in GitHub Desktop.
Save Integralist/5798071 to your computer and use it in GitHub Desktop.
Example of how Sass mixins when used excessively and without thought can actually be more of a code smell than a helper.

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.

@robwierzbowski
Copy link

Of course this doesn't help when prefixed properties have different value structures or when a value needs to be prefixed. You can use Compass to adress some of these issues, but for bulletproof support my preference is post processing with Autoprefixer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment