SCSS mixin 跳过默认参数答案

【问题标题】：SCSS mixin skip default argumentsSCSS mixin 跳过默认参数
【发布时间】：2019-10-05 11:26:55
【问题描述】：

我有一些混合：

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

【问题讨论】：

标签： css sass scss-mixins

【解决方案1】：

你不能这样做，但是你可以使用null 值，使用null，我们可以传递一个没有值的变量，除非我们在包含时为其分配一个值，否则它会从 CSS 输出中排除mixin。

所以在你的情况下：mixin

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

@include

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

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

所以只要你不定义任何值，它就会为空

【讨论】：

哦，太好了。这正是我所期待的。因为在这种情况下row 是浏览器的默认值。

【解决方案2】：

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

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

【讨论】：

这很有趣。但是在这种情况下，我使用 flexbox 编写的 SCSS 代码的行数几乎与普通 CSS 相同。因此，我认为这有点过头了。