如何将多个参数传递给 Sass Mixin：列表和命名变量

Question

我正在使用 mixin 来输出默认的转换时间函数、持续时间和可变数量的属性。

当前的 Mixin：

@mixin fast-transition($properties...) { 
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  @if length($properties) > 1 {
    transition-property: $properties;
  } @else {
    transition-property: all;
  }
  :global(.browser-ie) & {
    transition: none;
  }
}

当前使用情况：

@include fast-transition(background-color, color);

当前结果：

.el {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color;
}
.browser-ie .el {
  transition: none;
}

---

我希望能够指定transition: none 代码块的用法，可能通过@if 语句。

所需的 Mixin（不起作用）

@mixin fast-transition($properties..., $ieTransition) {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  @if length($properties) > 1 {
    transition-property: $properties;
  } @else {
    transition-property: all;
  }
  @if not ($ieTransition) {
    :global(.browser-ie) & {
      transition: none;
    }
  }
}

用法：（不起作用）

@include fast-transition((background-color, color), $ieTransition);

期望的输出：

.el {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: background-color, color;
}

---

工作版 - 来自云岑的回答

@mixin fast-transition($ie: false, $props: "all") {
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: #{$props};

  @if not($ie) {
    :global(.browser-ie) & {
      transition: none;
    }
  }
}

@include fast-transition($props: "background-color, color", $ie: true);

Answer 1

您必须将任意参数放在 mixin 参数列表的末尾（参见 doc）

试试这个：它使用 @include 参数列表中的命名参数和 @mixin definition 中的选项参数 (doc)

@mixin fast-transition($ieTransition: false, $properties: "all") {
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-property: $properties;
  
  @if not($ieTransition) {
    :global(.browser-ie) & {
      transition: none;
    }
  }
}

使用它来做这个

.el-all {
  // use all for transition properties and no transition for IE
  @include fast-transition();
)
// or
.el-no-ie {
  // use $properties for transition properties and no transition for IE
  @include fast-transition($properties: 'background-color, color");
)
// or
.el-ie {
  // use $properties for transition properties and transition for IE
  @include fast-transition($properties: 'background-color, color", $ieTransition: true);
)

看这个演示https://codepen.io/HerrSerker/pen/dyXEvWK?editors=1100

Answer 2

你试过了吗？

@mixin fast-transition($ieTransition: false, $properties...) {
  ...
}
@include fast-transition(background-color, color, $ieTransition: some_value);