gistfile1.md

Variadic argument support in LESS 1.3.0

.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

Furthermore:

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

It's important to point out this is a breaking change from 1.2, as 1.2 doesn't enforce a maximum number of arguments you can pass, only a minimum. So .mixin () would match 0-N arguments -- to get that behaviour now, we use (...), and () means exactly zero.

yes! i was going to ask you for this! ❤️

Whoa. This IS a breaking change.

So, if you can no longer do:

.mixin() {
something: @arguments;
}

Not that I ever did that, but that's how it worked before, yes?

Interesting... This is what I'm waiting for (named arguments):

.mixin(@A: 1, @b: 2) { }

myproperty: .mixin(@b: 3);

This is a GREAT change, @cloudhead. Thanks!

Testing this more, it appears to not work for things like box-shadow. For example, given the following mixin and arguments:

// Setup the mixin
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25), ...) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

// Use the mixin
.element {
  .box-shadow(0 1px 2px rgba(0,0,0,.1), inset 0 2px 3px rgba(0,0,0,.075));
}

Which compiles to:

.element {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset 0 2px 3px rgba(0,0,0,.075);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1) inset 0 2px 3px rgba(0,0,0,.075);
          box-shadow: 0 1px 2px rgba(0,0,0,.1) inset 0 2px 3px rgba(0,0,0,.075);
}

Note the missing comma between the two values, rendering the entire box-shadow property inert.

@arguments concats varargs as a single string (which is why there are no commas). the above is interpreted as two seperate variables - not 1 comma delimited var. You could do this:

.element {
  .box-shadow(~"0 1px 2px rgba(0,0,0,.1), inset 0 2px 3px rgba(0,0,0,.075)");
}

Because of this, doesn't seem like we're getting anything from the @arguments var... just use @shadow

Ahhh, yes didn't even think about that at the time. <3

That works, but I find it rather counter intuitive with mixins that provide a uniform facade to browser specific prefixes such as .box-shadow above.

Markdotto: You can do this.

.lol(@arg...){
  background: ~`"@{arg}".replace("]","").replace("[","")`;
}
.lol(hi,lol,rofl);

result: background: hi, lol, rofl;

Very useful reference, even from 2014.