Skip to content

Instantly share code, notes, and snippets.

Embed
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

Furthermore:

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link

fat commented Feb 28, 2012

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

@matthew-dean

This comment has been minimized.

Copy link

matthew-dean commented Mar 10, 2012

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);

@rosshadden

This comment has been minimized.

Copy link

rosshadden commented Mar 13, 2012

This is a GREAT change, @cloudhead. Thanks!

@mdo

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

mdo commented Mar 25, 2012

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

@bartt

This comment has been minimized.

Copy link

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.

@petrbrzek

This comment has been minimized.

Copy link

petrbrzek commented Oct 6, 2012

Markdotto: You can do this.

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

result: background: hi, lol, rofl;

@himynameisdave

This comment has been minimized.

Copy link

himynameisdave commented Dec 10, 2014

Very useful reference, even from 2014.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.