Sass Mixin:不使用命名参数的与顺序无关的参数?

时间:2015-09-30 08:07:46

标签: css parameters sass arguments

情况

我有这样的混音:

@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的参数名称。

1 个答案:

答案 0 :(得分:1)

  

Keyboard Arguments

     

命名参数可以按任何顺序传递,参数可以默认传递   值可以省略。由于命名参数是变量名,   下划线和短划线可以互换使用。

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

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

输出结果为:

.box {
  display: flex;
  flex-direction: row;
}
相关问题