时间戳

首页 > 解决方案 > 如何将多个参数传递给 Sass Mixin：列表和命名变量

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


我想做的是指定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);

标签： csssassscss-mixins

解决方案

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

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

@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

推荐阅读