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.
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