Question

I was hoping to create LESS mixin for border-radius that allows for two parameters to be set as defaults by two other parameters in the mixin declaration. The following is an example, that does not work, but resembles what I’m trying to achieve:

.border-radius-ext (@topleft: 0, @topright: 0, @bottomright: @topleft, @bottomleft: @topright) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

I realize I could have all the values set to 0 to begin with. That’s not what I’m after. I was hoping that if the mixin were used like so:

blockquote {
    .border-radius-ext(3px, 5px);
}

The mixin would output:

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 5px;
}

…while still allowing the defaults for @bottomright and @bottomleft to be overridden if the mixin were used like so:

blockquote {
    .border-radius-ext(3px, 5px, 7px, 2px);
}

In that instance, the output would be:

blockquote {
    border-top-left-radius: 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 2px;
}

Is this not possible with LESS or am I just doing it wrong?

Answer 1

Default values for parameters can’t be other parameters. But you can use this approach:

.border-radius-ext (@topleft, @topright) {
    .border-radius-ext(@topleft, @topright, @topleft, @topright);
}

.border-radius-ext (@topleft, @topright, @bottomright, @bottomleft) {
    border-top-left-radius: @topleft;
    border-top-right-radius: @topright;
    border-bottom-right-radius: @bottomright;
    border-bottom-left-radius: @bottomleft;
}

Now you can use this mixin with either two or four parameters. You could also easily create a version with three parameters if needed.