Css 如何将多个参数传递给Sass 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;
}

当前使用情况：

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

当前结果：

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

---

我希望能够指定

转换：none

代码块的用法，可能通过@if语句

所需的混音（不起作用）

用法：（不起作用）

所需输出：

.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;
    }
  }
}

你试过这个吗

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

---

必须将任意参数放在mixin参数列表的末尾（请参阅）

请尝试以下操作：它使用

@include

参数列表中的命名参数和

@mixin定义中的选项参数（）

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


看到这个演示
我做了一个小小的调整，用{}包装$properties，以防止撇号在CSS中输出。除此之外，它现在正在按预期工作，谢谢！这不起作用：
SassError:所需参数必须位于可变长度参数之前