SCSS mixin 跳过默认参数

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.

所以只要你不定义任何值，它就会是null

Answer 2

也许是关键字参数？这允许定义特定参数。

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

SCSS mixin 跳过默认参数

SCSS mixin skip default arguments

css

sass

scss-mixins