Sass Mixin：不使用命名参数的顺序无关参数？ [复制]

Question

情况

我有一个这样的混合：

@mixin flexbox($type: null, $direction: null) {
    @if $type == null or $type == 'flex' {
        (...)
        display: flex;
    } 
    @if $type == 'inline-flex' {
        (...)
        display: inline-flex;
    }
    @if $direction == null or $direction == 'row' {
        (...)
        flex-direction: row;
    } 
    @if $direction == 'column' {
        (...)
        flex-direction: column;
    }
}

我现在可以这样使用：

@include flexbox(inline-flex, column);

但是我不能这样做：

@include flexbox(column);

因为现在 mixin 将“列”视为“$direction”的参数。

有办法解决吗？
一种让我的论点独立于它们的顺序的方法？

例如我希望能够通过以下任何一种方式使用 mixin：

@include flexbox(column);

@include flexbox(column, inline-flex);

@include flexbox(row, flex);

@include flexbox(row);

目前这些都不起作用，因为参数需要按特定顺序排列。

为什么不使用命名参数？

更新：我接受此解决方案是最好的方法。

正如 Hashem Qolami 所建议的，下面的“命名参数”将是解决此问题的一种选择：

@include flexbox($direction: column);

这是一个完全可以接受的解决方案。谢谢。

但是，我正在开发一个可供我公司多人使用的框架。
因此，我想让所有的 mixin 尽可能地简单易用。

在这种情况下：

@include flexbox(column); 

比这个更受欢迎：

@include flexbox($direction: column);

因为其他开发人员知道 flexbox 可以做什么，但不知道我如何命名我的参数。

这是一件小事，真的。但是使用命名参数意味着每个人都必须了解每个可用 mixin 的参数名称。

Answer 1

Keyboard Arguments

命名参数可以任意顺序传递，默认参数 值可以省略。由于命名参数是变量名， 下划线和破折号可以互换使用。

因此，您可以按如下方式传递参数：

.box {
  @include flexbox($direction: row);
}

输出将是：

.box {
  display: flex;
  flex-direction: row;
}