Skip to content

Instantly share code, notes, and snippets.

@evilmarty
Created October 25, 2012 07:39
Show Gist options
  • Save evilmarty/3951201 to your computer and use it in GitHub Desktop.
Save evilmarty/3951201 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);
}
@dlo
Copy link

dlo commented Oct 28, 2012

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

@kaishin
Copy link

kaishin commented Oct 29, 2012

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

@louisfisch
Copy link

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.

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