I'm trying to create a sass mixin for transitions. This is what I have so far.
@mixin transition($var)
-webkit-transition: $var
transition: $var
I want to be able to pass it multiple arguments like this
@include transition(color .5s linear, width .5s linear)
Unfortunately, I get the following error
Syntax error: Mixin transition takes 1 argument but 2 were passed.
Is there a way to do this so it produces the following output in css while still accepting an undefined number of arguments?
-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;
Variable Arguments
Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports “variable arguments,” which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by ...
. For example:
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
is compiled to:
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
From : SASS official Documentation
So you basically just need to change your mixins declaration to look like this :
@mixin transition($var...)
-webkit-transition: $var
transition: $var
When you call the mixin, call it like this:
@include transition( (color .5s linear, width .5s linear) );
With the extra parens. This will key sass into the fact that you want this used as a single argument.
EDIT: See Jeremie Parker's answer above if using Sass 3.2 or later. Real Variable Arguments were added in 3.2: http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released
In case you want multiple arguments and vendor-prefixed, like the fallowing scenario:
@include transition(transform .5s linear, width .5s linear)
Expected
-webkit-transition: -webkit-transform 0.5s linear, width 0.5s linear;
-moz-transition: -moz-transform 0.5s linear, width 0.5s linear;
-ms-transition: -ms-transform 0.5s linear, width 0.5s linear;
-o-transition: -o-transform 0.5s linear, width 0.5s linear;
transition: transform 0.5s linear, width 0.5s linear;
I suggest you this Mixin, I found on Meaningless Writing.
Code
@function prefix($property, $prefixes: (webkit moz o ms)) {
$vendor-prefixed-properties: transform background-clip background-size;
$result: ();
@each $prefix in $prefixes {
@if index($vendor-prefixed-properties, $property) {
$property: -#{$prefix}-#{$property}
}
$result: append($result, $property);
}
@return $result;
}
@function trans-prefix($transition, $prefix: moz) {
$prefixed: ();
@each $trans in $transition {
$prop-name: nth($trans, 1);
$vendor-prop-name: prefix($prop-name, $prefix);
$prop-vals: nth($trans, 2);
$prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
}
@return $prefixed;
}
@mixin transition($values...) {
$transitions: ();
@each $declaration in $values {
$prop: nth($declaration, 1);
$prop-opts: ();
$length: length($declaration);
@for $i from 2 through $length {
$prop-opts: append($prop-opts, nth($declaration, $i));
}
$trans: ($prop, $prop-opts);
$transitions: append($transitions, $trans, comma);
}
-webkit-transition: trans-prefix($transitions, webkit);
-moz-transition: trans-prefix($transitions, moz);
-o-transition: trans-prefix($transitions, o);
transition: $values;
}
Compass has a transition mixin that you could take a look at (or you could just use Compass). You can take a better look at it here: http://beta.compass-style.org/reference/compass/css3/transition/.
By the looks of it you can't do an undefined number of mixins as the maintainer of Compass also aids in maintaining Sass and you can see that he has defined a maximum number of 10 separate arguments for his transition mixin.