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

Question

Situation

I have a mixin like 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 I can now use like so:

@include flexbox(inline-flex, column);

However I can't do this:

@include flexbox(column);

Because now the mixin treats the "column" as an argument for "$direction".

Is there a way around that?
A way to make my arguments independent of their order?

E.g. I'd like to be able to use the mixin in any of these ways:

@include flexbox(column);

@include flexbox(column, inline-flex);

@include flexbox(row, flex);

@include flexbox(row);

Currently none of those are working, because of the arguments need to be in a specific order.

Why not use named arguments?

Update: I accept this solution as the best possible way.

As suggested by Hashem Qolami below "named arguments" would be an option to solve this:

@include flexbox($direction: column);

This is a perfectly acceptable solution. Thanks for that.

However I'm working on a framework that will be used by multiple people in my company.
Therefore I'd like to keep all mixins as foolproof and easy to use as possible.

In that case this:

@include flexbox(column);

Would be preferred over this:

@include flexbox($direction: column);

Because other devs know what flexbox can do, but not how I named my arguments.

It's a small thing, really. But the use of named arguments would mean that everyone would have to learn the argument-names of every mixin available.

Can't you use `@include flexbox(, column);`? Else, I would create a mixin for only direction, a mixin for only type and a mixin for both.. — razemauze, Sep 30 '15 at 08:22

score 4 · Accepted Answer · edited Apr 01 '23 at 02:23

4

Keyboard Arguments

Named arguments can be passed in any order, and arguments with default values can be omitted. Since the named arguments are variable names, underscores and dashes can be used interchangeably.

Therefore you could pass the arguments as follows:

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

The output would be:

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

edited Apr 01 '23 at 02:23

diezsiete

2,034
1
16
13

answered Sep 30 '15 at 08:23

Hashem Qolami

97,268
26
150
164

Thanks for the answer Hashem. I updated my question to further clarify the situation. But I'll go with your approach if a solution without named args is not possible. – Arrowcatch Sep 30 '15 at 09:10
@Arrowcatch Don't mention it. As per the update I think if you're going to build a framework all functionalities should be documented in someway than can be used by other developers. So it would be fine if you let them know what argument-names are. That's the only way I know as of now. – Hashem Qolami Sep 30 '15 at 09:38

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

Situation

Why not use named arguments?

1 Answers1