Question

Standard lesscss mixin:

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

However, in pure CSS I’m able to use several box shadows on one element, e.g.

#myBox {
    box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
    -moz-box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
}

To ie. create an inset and glow effect. Of course I want to use lesscss to remedy the vendor-prefix curse in this case too, but

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

#myBox {
    .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa);
}

will render

#myBox {
    box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa;
    -moz-box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa;
}

(notice the missing commas after white)! Which is syntactically incorrect. Is there any way to trick lesscss into concatenating multiple arguments with , instead of ? I thought this should be a more-or-less standard problem, but haven’t found any canonical solutions…

Answer 1

Use an escaped string

#myBox { .box-shadow(~"inset 0px 1px 0px white, 0px 0px 5px #aaa"); }

Or a javascript escape

Less 1.2.0 and below:

.box-shadow() {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}
#myBox { .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa); }

Less 1.3.0 and above (requires and uses ... variadic specifier):

.box-shadow(...) {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}

The author’s recommended way is an intermediate variable:

#myBox {
  @shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
  .box-shadow(@shadow);
}