How do you create multiple box-shadow values in LESS CSS

Question

Read This

There are several "correct" answers. Since this question gets a lot of traffic, I figured I should keep up with what (I think) the best answer is (based on the LESS documentation) as the LESS project matures, and change my accepted answer accordingly.

---

I'm using LESS and I haven't been able to find a fix for allowing multiple CSS3 box-shadows. I have the following mixin:

.box-shadow(@arguments) {     -webkit-box-shadow: @arguments;     -moz-box-shadow: @arguments;     box-shadow: @arguments; } 

and I'm attempting this:

.box-shadow(     inset 0 0 50px rgba(0,0,0,0.3),     0 0 10px rgba(0,0,0,0.5); ); 

This works in normal CSS3, but fails when running from a LESS file. I've read somewhere that the comma separating the 2 shadows is what causes the issue in the LESS parser.

Does anyone know how to make this work? The only workaround I can think of is creating an additional CSS file that contains my multiple box-shadow properties.

Answer 1

This works with newer LESS versions:

.box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8););                                   // this semicolon is important! ^ 

And this uglier version works even with older LESS versions:

.box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)"); 

Update: LESS evolved, so this answer was updated and is now correct again. Thanks Michał Rybak