情况

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”的参数。

有办法吗？
一种让我的论证独立于他们的顺序的方法吗？

E.g。我希望能够以任何方式使用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;
}

Sass Mixin：不使用命名参数的与顺序无关的参数？

情况

为什么不使用命名参数？

1 个答案: