Skip to content

Instantly share code, notes, and snippets.

@evilmarty
Created October 25, 2012 07:38
Show Gist options
  • Save evilmarty/3951197 to your computer and use it in GitHub Desktop.
Save evilmarty/3951197 to your computer and use it in GitHub Desktop.
Sass vendor helper mixins

If like me you find it frustrating to define the same vendor prefixes over and over again. Sure, you might create mixins that help reduce the amount of repetitiveness but when your mixins file becomes a library (or not) you see so many lines of near-identical code and wonder if there is an easier way.

Say you have this (all-too familiar) mixin:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

So many lines of near-identical code. For a one off this is acceptable, but when that library grows it becomes all-too common and begins to irk you.

So with vendor helper mixin the code becomes:

@mixin border-radius($radius) {
  @include vendor-prefix(border-radius, $radius);
}

And presto, much leaner code for the same output.

For the situation where it's not the property but rather the function that is prefixed, I include a helper for that circumstance also. Say we want to do a linear gradient, the code would be something like this, whether it be manual or a mixin:

.button {
  background-image: -webkit-linear-gradient(top, red, blue);
  background-image: -moz-linear-gradient(top, red, blue);
  background-image: -ms-linear-gradient(top, red, blue);
  background-image: -o-linear-gradient(top, red, blue);
  background-image: linear-gradient(top, red, blue);
}

Just use my magic vendor helper mixin and presto:

.button {
  @include vendor-function(background-image, linear-gradient, top, red, blue);
}

Again, same CSS but less code. All you library and module writers can start thanking me now. Go nuts!

$VENDORS: webkit, moz, ms, o;
@mixin vendor-prefix($property, $values...) {
@each $vendor in $VENDORS {
-#{$vendor}-#{$property}: $values;
}
#{$property}: $values;
}
@mixin vendor-function($property, $func, $args...) {
@each $vendor in $VENDORS {
#{$property}: -#{$vendor}-#{$func}($args);
}
#{$property}: #{$func}($args);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment