Sass mixin with multiple optional parameters, but only one property - css

Question

So I'm trying to do something functionally equivalent to this:
Can a sass #mixin accept an undefined number of arguments?
...with a transitionFast mixin, but I want to be strict about the easing functions and speeds, so I've defined them within the mixin, like so:
#mixin transitionFast($property) {
-webkit-transition:$property ease 0.2s;
-moz-transition:$property ease 0.2s;
-o-transition:$property ease 0.2s;
transition:$property ease 0.2s;
}
How can I pass multiple $properties to this, without passing through the ease 0.2s part? I've tried this:
#mixin transitionFast($properties...) {
#each $property in $properties {
transition:$property ease 0.5s;
}
}
which I'm trying to call like this:
#include transitionFast(background-color, color);
but it doesn't work and only applies the transition to the last passed argument. Any ideas?

Answer 1

In your case there are several ways to go with sass splat-like args:
1) If you define mixin with splat args like so:
#mixin transitionFast($properties...) {
# with iteration on $properties
}
And you include it normal like this:
#include transitionFast(firstArg, secondArg, thirdArg);
Then you get
# compiled
transition: firstArg;
transition: secondArg;
transition: thirdArg;
2) You will also get the same thing when you don't specify splat args
#mixin transitionFast($properties) {
# with iteration on $properties
}
And include them with double parents
#include transitionFast((firstArg, secondArg, thirdArg));
3) If you declare mixin this way:
#mixin transitionFast($properties...) {
# with iteration on $properties
}
and call it whis way:
#include transitionFast(( background-color, color, red ));
you will get behavior similar to default behavior (ie without iteration over splat):
transition: background-color, color, red;
Now, back to your question, you can do this to get what You want:
$ease: ease 0.5s;
#mixin transitionFast($properties...) {
#each $prop in $properties {
transition: $prop $ease;
}
}
html {
#include transitionFast( background-color, color, margin );
}
Edit: instead transition: $prop $ease; go with compass #include transition( $prop $ease ); as Pik_at suggested, its more dry and sexy.
Just for fun:
If you leave (above) mixin as it is and include it like this:
#include transitionFast(( background-color, color ), padding);
it compiles to
transition: background-color, color ease 0.5s;
transition: padding ease 0.5s;
combining iteration and regular 'splatting', very cool stuff :)

Answer 2

Array parameters should be on bracket like:
#include transitionFast((background-color, color));
I made a simple code test to show you:
http://codepen.io/pik_at/pen/wBjgpY
Likewise, using Compass would help you to add transition mixin with browsers prefix:
#mixin transitionFast($properties) {
#each $property in $properties {
#include transition($property 2s ease);
}
}