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);

目前，其中 none 个正在运行，因为参数需要按特定顺序排列。

为什么不使用命名参数？

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

正如 Hashem Qolami 在“命名参数”下方所建议的那样，可以选择解决此问题：

@include flexbox($direction: column);

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

不过，我正在开发一个将由我公司的多人使用的框架。
因此，我希望所有的 mixin 都尽可能简单易用。

在那种情况下：

@include flexbox(column);

比这个更受欢迎：

@include flexbox($direction: column);

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

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

Answer 1

Keyboard Arguments

Named arguments can be passed in any order, and arguments with default values can be omitted. Since the named arguments are variable names, underscores and dashes can be used interchangeably.

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

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

输出将是：

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

Sass Mixin：不使用命名参数的独立于顺序的参数？

Sass Mixin: order-independent arguments without using named arguments?

css

parameters

arguments

sass

情况

为什么不使用命名参数？