CODEWITHSUNDEEP
cssvariablesparametersless
bridgestew
bridgestew

Reputation: 35

LESS variable usage in mixin paramaters

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?

Upvotes: 1

Views: 298

Answers (2)

Christoph Leiter
Christoph Leiter

Reputation: 9345

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.

Upvotes: 3

Stone
Stone

Reputation: 2668

Because your mixin is expecting 4 variables - you need to input four. Setting default values will only work if you have defaults for all the variables and you pass in nothing - or (i think) - if you always put the variables at the beginning and the ones with the defaults at the end.

In any case, I recommend just using four variables, possibly with defaults, because if another developer goes to work on your LESS it will be less confusing.

Something like this would be good:

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

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

I also recommend using LESS elements, http://lesselements.com/, a great collection of pre-built mixins.

Upvotes: 0

Related Questions