Question

我有一些混搭物

@mixin flexBox( $directionVlaue: row, $justifyValue: flex-start, $alignValue: baseline ) {
  display: flex;
  flex-direction: $directionVlaue;
  justify-content: $justifyValue;
  align-items: $alignValue;
}

现在，如果我使用它并传递参数，则有可能跳过一个参数，所以我不必一直写所有三个参数：

.thing {
   @include flexBox(row, center, center);
}

我不想在这里指定row，因为它是默认值。所以有可能像这样写东西：

.thing {
   @include flexBox( , center, center); // leave first argument empty
}

Answer 1

您无法执行此操作，但是可以使用null值，通过null，我们可以传递没有值的变量，除非我们分配值，否则它将被排除在CSS输出之外包括mixin时使用它。

因此，您的情况是： mixin

@mixin flexBox( $directionVlaue: null, $justifyValue: flex-start, $alignValue: baseline )

@include

.thing {
   @include flexBox(center, center); 
}

在这种情况下可以使用null值，因为我们仍然可以定义可选参数，而无需不必要的CSS输出。因此，现在，如果我们传递两个值，它将仅将这些声明输出到CSS。

只要您不定义任何值，它将为空

Answer 2

也许是关键字参数？这样可以定义特定的参数。

https://sass-lang.com/documentation/at-rules/mixin#taking-arbitrary-keyword-arguments

SCSS mixin跳过默认参数

2 个答案: