Question

我有scss @mixin的多重转换问题。我正在尝试使用 1-5 不同的属性创建动态转换@mixin。当我处理下面的代码时，错误会显示：

错误：Mixin转换需要1个参数但传递了3个参数。在style.scss的第758行，在`transition＆＃39; 来自style.scss的第758行，使用--trace进行回溯。

这是我的代码：

@mixin：

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

@include：

@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。我想出了uniqBy解决方案:(参见帮助函数的链接）

import $ from 'jquery';
import plugin from 'plugin';

...
ngOnInit() {
    // if it has jQuery prototyping
    $(el).plugin(options);
    // with Javascript
    const plugin = new plugin();
}

Answer 3

我创建了一个简短的mixin，它允许在一个声明中添加多个过渡属性。如果为计时，缓动或延迟提供的参数数量少于过渡属性的数量，则重复这些参数。

@mixin transition($prop, $time, $easing: $ease1, $delay: 0s) {
    $transition: ();
    @for $i from 1 through length($prop) {
        @for $j from 0 to (length($prop)) - (length($time)) {
            $time: join($time, nth($time, -1));
        }
        @for $j from 0 to (length($prop)) - (length($easing)) {
            $easing: join($easing, nth($easing, -1));
        }
        @for $j from 0 to (length($prop)) - (length($delay)) {
            $delay: join($delay, nth($delay, -1));
        }

        $transition: append(
            $transition,
            (nth($prop, $i) nth($time, $i) nth($easing, $i) nth($delay, $i)),
            $separator: comma
        );
    }
    transition: $transition;
}

//scss input:
@include transition(height width transform, 0.2s 0.3s, linear, 0s);

//css output:
transition: height 0.2s linear 0s, width 0.3s linear 0s, transform 0.3s linear 0s;

Answer 4

时间和放松时间相同，但具有多种属性：

@mixin transitionPrefixMultiple($time, $properties...) {
  $transition: ();
  @each $property in $properties {
    $transition: append(
        $transition, ($property $time cubic-bezier(.42, 0, .58, 1)), $separator: comma
    );
  }
  -webkit-transition: $transition;
     -moz-transition: $transition;
      -ms-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

用法：

@include transitionPrefixMultiple(150ms, width, background-color, etc);

感谢@ nidhishs06，因为这是您答案的更简洁的版本

使用scss进行多次转换

4 个答案: