Using undefined number of arguments in mixins

I currently have -webkit specific attributes in my Less CSS sheet, I am trying to update them with mixins to add -moz attributes, like this:

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}

div {
    .transition(all .5s);
}

The example above works fine, however I also have things like that:

div {
    -webkit-transition: border-color .3s, background .3s;
}

And I can’t call the mixin as .transition(border-color .3s, background .3s) because it has more arguments than defined in the mixin. So what I am doing at the moment is this:

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}
.transition-2(@1, @2) {
    -webkit-transition: @1, @2;
    -moz-transition: @1, @2;
}

div {
    .transition-2(border-color .3s, background .3s);
}

This is annoying, I need to add redundant code in my sheet any time I’m using a number of arguments not previously used before; and I have this problem with others CSS3 properties too, for example box-shadow when I need to add inset at the beginning.

Is there any way to declare mixins flexible in their number of arguments with Less, just like CSS3 properties are?

回答1:

For this case, the redundant mixin code can be avoided using any one of the below mentioned options.

Option 1: (Simplest solution - thanks to seven-phases-max for highlighting the miss)

We can use semi-colon as a separator/delimiter for arguments and when we add a semi-colon at the end after specifying all properties that need to be transitioned (in a comma separated format), the whole part before it would be considered as one single argument.

Extract from the official Less website:

Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}

div{
    .transition(border-color .5s, background .3s, color .3s;);
}

So the above code when compiled would result in

div {
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}

Option 2:

Pass the input values to the mixin (how many ever specific properties need to be transitioned) within quotes. Within the mixin, use the ~ or the e() in-built functions to strip the quotes.

.transition(@1) {
    -webkit-transition: ~"@{1}";
    -moz-transition: ~"@{1}";
}

div {
    .transition("border-color .5s, background .3s");
}
div#sample2 {
    .transition("border-color .3s, background .3s, color .3s");
}

will produce the below CSS when compiled

div {
    -webkit-transition: border-color .5s, background .3s;
    -moz-transition: border-color .5s, background .3s;
}
div#sample2 {
    -webkit-transition: border-color .3s, background .3s, color .3s;
    -moz-transition: border-color .3s, background .3s, color .3s;
}

Option 3:

Less does allow creation of mixins which allow/accept variable number of inputs using the ... option. Hence you can use the same mixin as in your original code by adding the ... to the input variable and calling it as you had originally wanted.

.transition(@args...) {
    -webkit-transition: @args;
    -moz-transition: @args;
}

div {
    .transition(border-color .5s, background .3s);
}

The above will compile successfully but the only problem is that it would produce the below output when compiled. As you can see, the problem is that the parameter values are space separated and not comma separated (as they should be for the CSS to work properly).

div {
    -webkit-transition: border-color 0.5s background 0.3s;
    -moz-transition: border-color 0.5s background 0.3s;
}

Ofcourse we could write complex replace functions using regular expressions but that would really make the code messy. Instead we could use loops and some built-in functions to achieve the required output (like shown below).

.transition(@args...) {
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        -webkit-transition+: @arg;
        -moz-transition+: @arg;
    }
    .loop-args(length(@args));
}

div {
    .transition(border-color .5s, background .3s, color .3s);
}

Basically what we are doing is use the ... to accept multiple arguments as input to the mixin and then loop over each argument and add it to the CSS property's value. The +: (merge function introduced in Less v1.5.0) is used to produce the comma separated output.

When compiled, it would produce the below output:

div {
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}

回答2:

You could try

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}
.transition-2(@1, @2) {
    .transition(@1); // this includes all the stuff from transition(@1)
    color:red; // additional stuff
}

As for your actual question, I dont believe that LESS itself has any sort of "rest" style arguments passing.