Sass vendor helper mixins

README.md

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!

gistfile1.scss

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