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


this question has answer here:

situation

i have mixin this:

@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;     } } 

which can use so:

@include flexbox(inline-flex, column); 

however can't this:

@include flexbox(column); 

because mixin treats "column" argument "$direction".

is there way around that?
way make arguments independent of order?

e.g. i'd able use mixin in of these ways:

@include flexbox(column);  @include flexbox(column, inline-flex);  @include flexbox(row, flex);  @include flexbox(row); 

currently none of working, because of arguments need in specific order.

why not use named arguments?

update: accept solution best possible way.

as suggested hashem qolami below "named arguments" option solve this:

@include flexbox($direction: column); 

this acceptable solution. that.

however i'm working on framework used multiple people in company.
therefore i'd keep mixins foolproof , easy use possible.

in case this:

@include flexbox(column);  

would preferred on this:

@include flexbox($direction: column); 

because other devs know flexbox can do, not how named arguments.

it's small thing, really. use of named arguments mean have learn argument-names of every mixin available.

keyboard arguments

named arguments can passed in order, , arguments default values can omitted. since named arguments variable names, underscores , dashes can used interchangeably.

therefore pass arguments follows:

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

the output be:

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

Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -