LESS mixins with multiple arguments

Question

I have this little mixin set up:

.linear-gradient(@direction:top, @color1:#fff, @color2:#000) 
{
    background-image: -webkit-linear-gradient(@direction, @color1, @color2);
}

Then, in my main.less I'm trying something like this:

a { .linear-gradient(top, #999, #666); }

That works fine, by say I want to do something like this:

a { .linear-gradient(top,     , #666); }

Now, the first color should default to its default mixin color. How do I do this? Is this even possible

Answer 1

Less isn't quite that clever. You can either be explicit:

.linear-gradient(top, #fff, #000);

or use a variable as an abstraction to pass in the defaults.

@colorVar1: #fff;

.linear-gradient(top, @colorVar1, #000);

Less doesn't know how to handle an empty space, and will treat is as invalid.

Answer 2

You can also explicitly pass the arguments, where the remaining arguments assume their default values.

a { .linear-gradient(@direction:top, @color2:#666); }