Combing 2 sass mixins #transition and #vendor without errors - css

Question

I have 2 sass mixins that I would like to combine, 1 being for transitons and the other to handle vendor prefixes, so basically I want to transition the translateY value of an element so want to do something like the following:
#include transition( #include vendor(transform, .3s ease-in-out) );
Mixins
#mixin vendor($property, $value...){
-webkit-#{$property}:$value;
-moz-#{$property}:$value;
-ms-#{$property}:$value;
-o-#{$property}:$value;
#{$property}:$value;
}
#mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
transition: $args;
}
If anyone could advise how I actually do this or if there is a much better way that would be great. I don't need to use compass in case anyone suggests that.

Answer 1

With Compass
Compass is definitely the way to go about vendor prefixes. Then all you need to do is something like:
#import "compass";
test {
#include transition( transform 0.3s ease-in-out );
}
and the output will look like:
test {
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
DEMO
Own vendor mixins and functions (no Compass)
If for some reason you wouldn't use compass you can try making your vendor mixin a bit more exciting and add some functions (to check if an argument needs to be prefixed). Maybe something along these lines:
// loops through all arguments and prefixes the ones that need it (in this case only transform)
#function vendor-args($arg, $vendor) {
$result: ();
#each $i in $arg {
#if $i == transform { $result: append($result, #{$vendor}$i); }
#else { $result: append($result, $i); }
}
#return $result;
}
// general vendor mixin
#mixin vendor($property, $args...){
#each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
$out: null;
#each $arg in nth($args,1) {
$out: ($out, vendor-args($arg, $vendor));
}
#{$vendor}#{$property}: $out;
}
}
// general transition mixin
#mixin transition($args...) {
#include vendor(transition, $args);
}
// test
test {
#include transition( transform .3s ease-in-out, color .2s linear );
}
DEMO
Or if you want to check against a list of properties that need prefixing and not just transform, you can add another tiny function:
#function needs-vendor($p){
$l: transform, another-property-you-want-prefixed, and-another;
#each $i in $l {
#if $i == $p { #return terue; }
}
#return false;
}
and then use needs-vendor($i) instead of $i == transform.
Another thing is ... you don't really need to prefix transitions with -ms-. So you could make the vendor mixin take a list of prefixes as an optional argument, and use it like so:
#mixin transition($args...) {
#include vendor(transition, $args, ('-webkit-', '-moz-', '-o-', ''));
}
and voilá, here you go:
DEMO
But if you go with Compass it will do all the hard thinking for you ;-)