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

Very cool, but you could also just use compass, which does this all for you.

@dlo ...which does this and a bazillion other things that you might never use.

I find your mixins very useful especially the vendor-function one. I noticed that parentheses are not compiled though. It can render some undesirable effects. So I would change your vendor-function mixin as follows:

@mixin vendor-function($property, $func, $args...) {
  @each $vendor in $VENDORS {
    #{$property}: -#{$vendor}-#{$func}unquote('(')#{$args}unquote(')');
  }
  #{$property}: #{$func}unquote('(')#{$args}unquote(')');
}

I tested it with arguments such as text, numbers and so on. It seems to work pretty good this way. Hope this helps.