scss 的多重转换

Question

我有 scss 的多重转换问题 @mixin。我正在尝试创建具有 1-5 不同属性的动态转换 @mixin。当我处理下面的代码时 出现错误 :

Error: Mixin transition takes 1 argument but 3 were passed. on line 758 of style.scss, in `transition' from line 758 of style.scss Use --trace for backtrace.

这是我的代码：

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

我用这个 hack 解决了这个问题，但对我来说这似乎是一个非常不干净的解决方案：

@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 中那样传递值，而无需您当前使用的 hack 使其更清晰。

希望对您有所帮助

Answer 2

由于这是Google上的第一个结果，我想说这并不能解决我的问题。我想仅使用一个混入来转换 多个属性 。我想出了 this 解决方案：（请参阅 link 了解辅助函数）

/*
  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);
}

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 的多重转换

Multiple transitions with scss

css

sass

vendor-prefix