css - 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

试试这个方法：

trans = color 1s, text-shadow 1s

a
    transition(trans)

我的输出是：

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

Answer 2

只需删除括号即可自动解决问题：

a
    transition color 1s, text-shadow 1s

Answer 3

这是一个简单的转换@mixin，它接受两个参数。

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

您的声明块将是：

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

CSS 输出：

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

不止两个参数，我建议使用函数重构 @mixin。