Less CSS, please explain Advanced arguments and the @rest variable to me?

Question

Simple question: I don't understand what the Advanced arguments do in Less CSS, as per http://lesscss.org/features/#mixins-parametric-feature-advanced-arguments-and-the-rest-variable . I've battled to get my head around how it's explained there.

I understand this:

.mixin(@a: 1) {

But I don't understand the following two, where the ... is introduced:

.mixin(...) {        // matches 0-N arguments
.mixin() {           // matches exactly 0 arguments
.mixin(@a: 1) {      // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) {    // matches 1-N arguments

.mixin(@a; @rest...) { // @rest is bound to arguments after @a
// @arguments is bound to all arguments }

I'm learning Less because I'm very keen on bootstrap, but this puzzled me.

Thank you very much!

Answer 1

Well, okay you should also read http://lesscss.org/features/#mixins-parametric-feature-pattern-matching.

In Less only mixin that match the number of arguments of the caller are compiled. Notice also that when two or more mixins match, all of them are compiled into CSS.

When you mixin got one argument, like that shown below:

.mixin(@a) {}

Only callers with one argument match and will be compiled: .mixin(3); or .mixin(1) and so on. But NOT .mixin() or .mixin(1,2,3)

When you set a default value for the first argument, for instance 3, as shown below:

.mixin(@a: 3) {}

Now not only calls with 1 argument match, but also calls with zero arguments:

.mixin(@a: 3) {property: @a;}
p{ .mixin();}

outputs:

p {
  property: 3;
}

Now take a look to the special ... argument, that argument matches any number of arguments. So .mixin(...) will match and get compiled the following callers .mixin(), .mixin(1) and .mixin(1,2,3,4).

When you prepend a name (including the @) to the ... argument the values will be assigned to a variable with that name:

.mixin(@listofvariables...) {
p: @listofvariables;
}
p {
.mixin(one; two; three);
}

outputs:

p {
  p: one two three;
}

Notice that ... assigns the arguments to a list, which can be manipulated with the list functions too.

An mixin such as .mixin(@a; ...) is a variant of the preceding two use cases. This mixins requires a first argument set, followed by zero or any other arguments.

@arguments is a special variable that contains a list of all argument of the mixin:

.mixin(@a; @b) {p1: @arguments; p2:extract(@arguments,2); p3:@b;}
p {.mixin(1; 2);}

outputs:

p {
  p1: 1 2;
  p2: 2;
  p3: 2;
}

So the @arguments variable can be used in any mixin and does not require an ... argument.

What would a caller for a mixin like this look like? .mixin(@a; ...) could it be something like this: .mixin(@a,53px); ? How does it determine where the 53px goes to?

The 53px is not assigned to a variable, but it is the second item of the @arguments list. You can get it by extract(@arguments,2).

An use case for the .mixin(@a; ...) {} can be to assign a property always when .mixin() regardless the number of arguments, example:

.mixin(@a; ...) { color: @a;}
.mixin(@a) { background-color: contrast(@a); width:100%;}
.mixin(@a; @b;) { background-color: contrast(@a); width:@b;}
div {
.mixin(red);
}
div.small {
.mixin(red,50%);
}

outputs:

div {
  color: red;
  background-color: #ffffff;
  width: 100%;
}
div.small {
  color: red;
  background-color: #ffffff;
  width: 50%;
}

notice that the .mixin(@a; @rest...) {} assigns 35px the first item of the @rest list. And so the following Less code:

.mixin(@color,@padding...) { 
  color: @color; 
  padding: @padding 
}
div {
.mixin(red; 10px; 20px; 5px; 5px);
}

outputs:

div {
  color: red;
  padding: 10px 20px 5px 5px;
}