What happens to @arguments-list

[johnmiroki]

Sometimes, I need a comma-separated arguments copied down to the rules. @arguments doesn't help, for you get a space-separated list with it

eg:

.rotate3d(@x: 0, @y: 0, @z: 0, @degress: 0deg){
-webkit-transform: rotate3d(@arguments);
-moz-transform: rotate3d(@arguments);
-ms-transform: rotate3d(@arguments);
-o-transform: rotate3d(@arguments);
transform: rotate3d(@arguments);
}

.test {.rotate3d();}

outputs:
.test {
-webkit-transform: rotate3d(0 0 0 0deg);
-moz-transform: rotate3d(0 0 0 0deg);
-ms-transform: rotate3d(0 0 0 0deg);
-o-transform: rotate3d(0 0 0 0deg);
transform: rotate3d(0 0 0 0deg);
}

but what I really need is:
.test {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
-moz-transform: rotate3d(0, 0, 0, 0deg);
-ms-transform: rotate3d(0, 0, 0, 0deg);
-o-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}

I saw @arguments-list was mentioned here https://github.com/lukeapage/less.js/commit/44b07185b38a11c9b197807eb5f826283bb6a590

but I tried using @arguments-list to replace @arguments to no avail. The interpretor doesn't seem to recognize @arguments-list. Any thoughts? Thanks in advance!

[SomMeri]

The code you found is a fork. Less.js source code does not have such line: https://github.com/less/less.js/blob/master/lib/less/tree/mixin.js#L190 .

The change was not pulled into less.js, issue was discussed here: #941 . The discussed alternative solution is to use comma separated list. In your case, you can do following:

.rotate3d(@x: 0, @y: 0, @z: 0, @degress: 0deg){
  //create list
  @my-list: @x, @y, @z, @degress;

  //use list
  -webkit-transform: rotate3d(@my-list);
  -moz-transform: rotate3d(@my-list);
  -ms-transform: rotate3d(@my-list);
  -o-transform: rotate3d(@my-list);
  transform: rotate3d(@my-list);
}

.test {.rotate3d();}

which outputs:

.test {
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  -moz-transform: rotate3d(0, 0, 0, 0deg);
  -ms-transform: rotate3d(0, 0, 0, 0deg);
  -o-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
}

Alternative solution:

.rotate3d(@list){
  -webkit-transform: rotate3d(@list);
  -moz-transform: rotate3d(@list);
  -ms-transform: rotate3d(@list);
  -o-transform: rotate3d(@list);
  transform: rotate3d(@list);
}

.test2 {
  //notice semicolon after arguments, 
  //it is important in this case 
  .rotate3d(0, 0, 0, 0deg;);
}

It outputs the same.

[johnmiroki]

Hi SomMeri, that's totally solved my problem. Thanks a lot!

[SomMeri]

You are welcome :). I will close the issue then.