css - 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)//看到两个参数而不是一个参数

在 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，从而使它更清晰。

希望对你有帮助