Can a sass @mixin accept an undefined number of arguments?

Question

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;

Answer 1

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