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.
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
Post a Comment