使用scss进行多次转换

Question

我有scss的多重转换问题@mixin.我试图@mixin用1-5种不同的属性创建动态转换.当我正在处理下面的代码时,会出现此错误:

错误:Mixin转换需要1个参数但通过3个参数.在style.scss的第758行,在style.scss的第758行的"transition"中使用--trace进行回溯.

这是我的代码:

---

@mixin:

@mixin transition($x){
    transition: $x;
    -webkit-transition: $x;
    -moz-transition: $x;
    -ms-transition: $x;
    -o-transition: $x;
}

---

@包括:

@include transition(visibility 0s ease 0.2s, opacity 0.2s ease, transform 0.3s ease);

---

我用这个黑客想出来了,但对我来说它看起来像是一个非常不洁净的解决方案:

@include transition(visibility 0s ease 0.2s + "," + opacity 0.2s ease + "," + transform 0.3s ease);

有没有更好的方法呢？

Answer 1

在你的中mixin,你已经将一个变量声明$x为一个参数,这意味着sass期望mixin用一个参数调用它.

@include transition(visibility 0s ease 0.2s)

当你传递mixin逗号分隔值时,它会导致错误,因为sass将这些值视为多个值,而不是它所期望的单个值.

@include transition(visibility 0s ease 0.2s, opacity 0.2s ease) //Sees two args instead of one arg

在Sass中,如果声明为varargs,则逗号分隔值可以解释为单个值.Varargs是mixin或函数参数声明,其名称后附加3个点.

替换$x参数$x...将确保sass将传递给mixin的逗号分隔参数解释为一个值.

@mixin transition($x...){
  -webkit-transition: $x;
  -moz-transition: $x;
  -ms-transition: $x;
  -o-transition: $x;
  transition: $x;
}

它可以像这样使用

div {
  @include transition(color 1s, background-color 1s, border-color 1s);
}

编译成

div {
  -webkit-transition: color 1s, background-color 1s, border-color 1s;
  -moz-transition: color 1s, background-color 1s, border-color 1s;
  -ms-transition: color 1s, background-color 1s, border-color 1s;
  -o-transition: color 1s, background-color 1s, border-color 1s;
  transition: color 1s, background-color 1s, border-color 1s;
}

通过执行此操作,您可以像往常一样在CSS中传递值,而无需使用当前正在使用的黑客,使其更清晰.

希望这可以帮助

Answer 2

由于这是谷歌上的第一个结果，我想说这并不能解决我的问题。我想转换多个属性，只有一个 mixin。我想出了这个解决方案：（参见帮助函数的链接）

/*
  usage: @include transition(prop1, prop2, ..., 0.5s cubic-bezier(0.16, 0.85, 0.45, 1));
*/
@mixin transition($args...) {
  $type: nth($args, length($args));
  $props: remove-nth($args, length($args));
  $result: ();

  @for $i from 1 through length($props) {
    $prop: nth($props, $i);
    $result: append($result, $prop);
    $result: append($result, $type);
    @if $i != length($props) {
      $result: append($result, unquote($string: ","));
    }
  }

  @include simple_transition($result);
}