在 Sass mixin 中跳过可选参数

Question

我有这个 mixin 来处理简单的 CSS3 线性渐变：

@mixin linear-gradient($from, $to, $dir: bottom, $dir-webkit: top, $ie-filters: false) {
    background-color: $to;
    background-image: -webkit-linear-gradient($dir-webkit, $from, $to);
    background-image: linear-gradient(to $dir, $from, $to);
    @if $ie-filters == true and $old-ie {
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($from)}', endColorstr='#{ie-hex-str($to)}');
    }
}

$dir

是“方向”的缩写。

如果我需要使

$ie-filters

为“true”并且不需要更改

$dir

/

$dir-webkit

默认值，我仍然需要重新声明它们，这显然不是很干燥和最佳，所以我会必须这样做：

@include linear-gradient(#7a7a7a, #1a1a1a, bottom, top, true);

当我只想这样做时：

@include linear-gradient(#7a7a7a, #1a1a1a, true);

调用 mixin 时如何以这种方式跳过参数？

PS，如果您想知道

$dir-webkit

参数，它适用于 Webkit，因为它仍然无法处理新的渐变语法（请参阅：http:// generatedcontent.org/post/37949105556/updateyourcss3 -> 新渐变语法），方向需要与标准语法相反。

Answer 1

从 SASS 3.1 开始，您可以传递命名参数来执行此操作：

@include linear-gradient($from: #7a7a7a, $to: #1a1a1a, $ie-filters: true);

其余默认即可。

Answer 2

与

"sass": "^1.67.0"

我尝试了一种解决方法，并且成功了。但是，如果您不想在

@include

期间包含它们，则需要指定默认的

null

值。

// _mixins.scss
@mixin flex-base(
  $display: flex,
  $direction: null,
  $wrap: null,
  $align: null,
  $justify: null,
  $gap: null
) {
  display: $display;
  flex-direction: if($direction, $direction, null);
  flex-wrap: if($wrap, $wrap, null);
  align-items: if($align, $align, null);
  justify-content: if($justify, $justify, null);
  gap: if($gap, $gap, null);
}

// _sth.scss
.sth {
  @include flex-base($align: center, $justify: center);

  &__else {
    @include flex-base($align: center, $gap: 4rem);

    @media screen and (max-width: 767.98px) {
      @include flex-base($direction: column);
    }
  }
}

希望它能帮助那里的人。