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;

Solution 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

Solution 2

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

Solution 3

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;
}

Comments

[Jérémie Parker]

@troelskn I posted my answer way after Joseph's and his was already selected as THE answer. I added mine because I asked the very same question and found the answer in SASS Documentation and hoped it could save some devs the trouble of dealing with superfluous parentheses :)

[Joseph Erickson]

Yes, it looks like this option was added in 2012, after the question and my answer were given. chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

[sam]

So is that a single list value now?

[Daniel Dogeanu]

You sir are a genius! Thank you!