Multiple arguments transition mixin

Question

I just want to implement a basic mixin for the transitions, this is my code:

transition()
    transition         arguments
    -webkit-transition arguments

Until i use this mixin with a single property all is working fine, but when i try to do something like this:

a
   transition(color 1s, text-shadow 1s)

My output is:

a {
    transition: color 1s text-shadow 1s;
    -webkit-transition: color 1s text-shadow 1s;   
}

no commas are added... any suggestions?

Answer 1

Issue auto-solved simply by removing the parentheses:

a
    transition color 1s, text-shadow 1s

Answer 2

Try this way:

trans = color 1s, text-shadow 1s

a
    transition(trans)

My output for this is:

a {
  transition: color 1s, text-shadow 1s;
  -webkit-transition: color 1s, text-shadow 1s;
}

Answer 3

Here is a simple transition @mixin that accepts two arguments.

@mixin transition($arg1, $arg2) {
  -webkit-transition: $arg1, $arg2;
  -moz-transition:    $arg1, $arg2;
  -ms-transition:     $arg1, $arg2;
  -o-transition:      $arg1, $arg2;
  transition:         $arg1, $arg2;
}

Your declaration block would be:

@include transition(background .3s, color .3s);

CSS output:

  -webkit-transition: background 0.3s, color 0.3s;
  -moz-transition: background 0.3s, color 0.3s;
  -ms-transition: background 0.3s, color 0.3s;
  -o-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;

Anymore than two arguments, I suggest refactoring the @mixin with a function.