Less mixin issue for multiple box-shadow arguments

Question

I\'m working in a project were i have to use less, personally I always use stylus, but I can\'t with this project, so I have the next question. how can i do this, that i\'m doin

Answer 1

LESS now

Current versions of LESS allow you to use commas as separators of lists, and then put a single semicolon at the end of the parameter to pass the whole thing as a comma separated list. So this now works (note the extra semicolon at the end right before the closing parenthesis.

.box-shadow(0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2););
                                                                                                                                                                                                        ^here

Original (pre LESS 1.3.3) Answer

Here's how LESS needs to be done to get the same output:

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

.div {
    .box-shadow(~"0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.2), inset 0 10px rgba(255, 255, 255, 0.2), inset 0 10px 20px rgba(255, 255, 255, 0.2), inset 0 -15px 30px rgba(0, 0, 0, 0.2)");
}

.div2 {
    .box-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

NOTE: To do multiple shadows as your .div, you need to pass them as a single argument using an escaped string, which is why the first use has ~" " surrounding the whole argument string. If you are just passing one shadow, that is not necessary. LESS needs that to get the commas between the shadow groups.