Question

I’m currently working with LESS CSS and tried to create a mixin that mimics the default css behavior of shorthand parameters.

in css you often declare i.e.

margin: 5px 5px 10px;

and it’s read as

margin: 5px 5px 10px 5px;

I tried the same with a border-radius mixin

.border-radius (@topright: 5px, @bottomright: @topright, @bottomleft: @topright, @topleft:  @bottomright) {}

I want it to take the first as default for all, if called with one parameter only. If I call it with 2 parameter it should take the first as default for the third and the second as default for the fourth.

Is there a way to achieve this behavior with LESS alone?

Answer 1

The correct way to do this would be to receive just one parameter

.border-radius(@px) {
    -webkit-border-radius: @px;
    -moz-border-radius: @px;
    border-radius: @px;
}

Then you can call it with one parameter:

.border-radius(5px);

or with many. This requires you to either put them in a variable, or escape them:

@myradius: 5px 5px 10px;
.border-radius(@myradius);

or

.border-radius(~"5px 5px 10px");

I read that the Bootstrap project uses the latter version for brevity.