cloudhead/less.js — Issue #501: Parametric mixin with default value error.
Author: deadlyhifi
Created: 2011-12-02 11:32:57+00:00
State: open

The following mixin:

```
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-webkit-border-top-right-radius: @topright;
-webkit-border-bottom-right-radius: @bottomright;
-webkit-border-bottom-left-radius: @bottomleft;
-webkit-border-top-left-radius: @topleft;
-moz-border-radius-topright: @topright;
-moz-border-radius-bottomright: @bottomright;
-moz-border-radius-bottomleft: @bottomleft;
-moz-border-radius-topleft: @topleft;
border-top-right-radius: @topright;
border-bottom-right-radius: @bottomright;
border-bottom-left-radius: @bottomleft;
border-top-left-radius: @topleft;
}
```

and implemented:
```test { .border-radius(4px 0px 0px 4px); }```

Outputs:

```
.test {
-webkit-border-top-right-radius: 4px 0 0 4px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 4px 0 0 4px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 4px 0 0 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
```
All four values appear in the top right value.

I just realised that in the implementation I wasn't using commas to separate the values. Putting them in ```test {.border-radius(4px, 0px, 0px, 4px); }``` fixes it.

Still, I thought I'd still report it as it would be nice to write the implementation without the commas as I'm sure I'll forget on a regular basis as it differs slightly from CSS syntax. Also, it doesn't throw an error and therefore might go unnoticed.