Search code examples
csslessmixins

LESS mixins with multiple arguments

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

Solution

  • 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.