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 tr ест «столбец» в качестве аргумента для «$ direction».

Есть ли способ обойти это?
Способ сделать мои аргументы независимыми от их заказа?

E.g. Я хотел бы быть в состоянии использовать подмешать в любом из следующих способов:

@include flexbox(column); 

@include flexbox(column, inline-flex); 

@include flexbox(row, flex); 

@include flexbox(row); 

В настоящее время ни один из них не работает, потому что аргументы должны быть в определенном порядке.

Почему бы не использовать именованные аргументы?

Обновление: Я принимаю это решение как наилучший способ.

Как было предложено Хашем Qolami ниже «именованных аргументов» будет вариант, чтобы решить эту проблему:

@include flexbox($direction: column); 

Это вполне приемлемое решение. Спасибо за это.

Однако я работаю над рамкой, которая будет использоваться несколькими людьми в моей компании.
Поэтому я бы хотел, чтобы все микшины были надежными и простыми в использовании.

В этом случае это:

@include flexbox(column); 

бы предпочтительнее это:

@include flexbox($direction: column); 

Потому что другие разработчики знают, что Flexbox может сделать, но не так, как я назвал мои аргументы.

Это мелочь, действительно. Но использование названных аргументов означало бы, что каждому нужно будет узнать имена аргументов каждого доступного mixin.

Answer 1

Keyboard Arguments

Именованные аргументы могут быть переданы в любом порядке, и аргументы с по умолчанию значения могут быть опущены. Поскольку именованные аргументы являются именами переменных, подчеркивания и тире могут использоваться взаимозаменяемо.

Поэтому вы можете передать аргументы следующим образом:

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

Выхода будет:

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