Question

我只是想为转换实现一个基本的mixin，这是我的代码：

transition()
    transition         arguments
    -webkit-transition arguments

直到我将这个mixin与一个属性一起使用才能正常工作，但当我尝试做这样的事情时：

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

我的输出是：

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

没有添加逗号......有什么建议吗？

Answer 1

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

a
    transition color 1s, text-shadow 1s

Answer 2

尝试这种方式：

trans = color 1s, text-shadow 1s

a
    transition(trans)

我的输出是：

a {
  transition: color 1s, text-shadow 1s;
  -webkit-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。

多个参数转换mixin

3 个答案: