Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?

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


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

cloudhead commented Feb 28, 2012

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.

fat commented Feb 28, 2012

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!

mdo commented Mar 25, 2012

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.

fat commented Mar 25, 2012

@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

mdo commented Mar 25, 2012

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

bartt commented Mar 26, 2012

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.

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

result: background: hi, lol, rofl;

Very useful reference, even from 2014.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment