LESS: Complicated mixin parameters

Question

The problem: I want to create a LESS mixin for 'notched' corners for boxes that have padding.

Image example: https://i.stack.imgur.com/XBcKo.png

This box has its top right and bottom left corners notched out, with :before/:after content squares.

I want to create a mixin, so I don't have to make a class for every possibility of options.

Something like .boxed-corners(top right, bottom left);

My feeble attempt was this:

@box-padding: 10px;

.boxed-corners(@pos1 @pos2, @pos3 @pos4) {
    position: relative;

    &:before {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @pos1: 0;
        @pos2: 0;
    }
    &:after {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @pos3: 0;
        @pos4: 0;
    }
}

But that is invalid because between the sets of vars. Even when added, @pos1 or @pos2 won't use the string you've inputted (top, left, right, bottom).

I know I'm way off, but there's probably a way to accomplish this. Any ideas?

EDIT: Thanks seven-phases-max, that's what I was looking for:

Thank you! That was it, I just didn't know what to search for. My working code is now:

.boxed-corners(@pos1; @pos2; @pos3; @pos4) {
    position: relative;

    &:before {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @{pos1}: 0;
        @{pos2}: 0;
    }
    &:after {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @{pos3}: 0;
        @{pos4}: 0;
    }
}

The only bad thing is that all four values have to be separated by commas (bottom, left, top, right), instead of (bottom left, top right), but I'll take it.

Just look at the `@pos1: 0;` statement once more. Yes, it actually just defines new `@pos1` variable so it obviously can't be used for CSS property generation. What you need is [Property Interpolation](http://lesscss.org/features/#variables-feature-properties). — seven-phases-max, Aug 14 '14 at 18:11
You can use `(bottom left, top right)` actually. See for example http://stackoverflow.com/a/21011089 and the [corresponding documentation](http://lesscss.org/functions/#list-functions). — seven-phases-max, Aug 14 '14 at 22:24
@bmac please don't edit your question with the answer, but create an answer yourself and accept that, thanks — Bass Jobsen, Oct 29 '14 at 23:21

score 1 · Answer 1 · answered Oct 29 '14 at 23:20

I think that the comments of @seven-phases-max are intend to show you that creating a mixin which can be called with (bottom left, top right) Can be easily done levaraging the Less list functions. And indeed the corresponding documentation can be found at http://lesscss.org/functions/#list-functions

For instance rewrite your mixins as follows:

.boxed-corners(@before; @after; @box-padding:10px) {
    position: relative;
    @pos1: extract(@before,1);
    @pos2: extract(@before,2);
    @pos3: extract(@after,1);
    @pos4: extract(@after,2);

    &:before, &:after {
        position: absolute;
        display: block;
        content: "";
        .bg-body();
        width: @box-padding;
        height: @box-padding;
        @{pos1}: 0;
        @{pos2}: 0;
    }
    &:before {
        @{pos1}: 0;
        @{pos2}: 0;
    }
    &:after {
        @{pos3}: 0;
        @{pos4}: 0;
    }
}

The .boxed-corners() can be called as follow, all examples give the same result:

sel1 {
.boxed-corners(top right, bottom left);
}

sel2 {
.boxed-corners(top right; bottom left);
}

sel3 {
.boxed-corners(top, right; bottom, left);
}

LESS: Complicated mixin parameters

1 Answers1