Concatenating an arbitrary number of values ​​in a lesscss mixin

Question

Smaller standard mix:

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

However, in pure CSS, I can use multiple box shadows for a single element, for example.

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

I.e. Create an insert and glow effect. Of course, I want to use lesscss to fix the provider prefix curse in this case, but

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

will display

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

(note the missing commas after white )! Syntactically incorrect. Is there a way to trick lesscss into concatenating multiple arguments with , instead ? I thought that this should be a more or less standard problem, but did not find canonical solutions ...

Answer 1

Use escaped string

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

Or javascript escape

Less than 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 than 1.3.0 and higher (requires and uses the specifier ... variadic):

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

Recommended author is an intermediate variable:

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

Answer 2

If you avoid the argument string as a string literal, it will carry a comma the same way you want:

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

Outputs:

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

Answer 3

If you use lessphp ( http://leafo.net/lessphp/ ) for server-side compilation (instead of the javascript lesscss compiler from http://lesscss.org ) you can link the php function and use it to change the character used to concatenate .

Sample lesscss code:

 .linear-gradient(@fallback, @deg, @tail...) { background-color: @fallback; background-image: linear-gradient(@deg, separateByComma(@tail)); background-image: -webkit-linear-gradient(@deg, separateByComma(@tail)); background-image: -moz-linear-gradient(@deg, separateByComma(@tail)); background-image: -o-linear-gradient(@deg, separateByComma(@tail)); } body { .linear-gradient(#FCFCDD, 135deg, #FCFCDD, #FFFFFF 66%, #FCFCDD); } 

Associated php function:

 function lesscss_separateByComma($arg) { if($arg[0]=='list') $arg[1]=','; return $arg; } 

And to bind and compile lesscss code:

 $less=new lessc(); $less->registerFunction('separateByComma', 'lesscss_separateByComma'); $code=$less->compile($code); 

Output:

 body { background-color: yellow; background-image: linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD); background-image: -webkit-linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD); } 

Tested with a lower value of 0.4.0.

Answer 4

Using the solution found here works with one AND several arguments:

 .box-shadow (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; -webkit-box-shadow: @value; -moz-box-shadow: @value; -ms-box-shadow: @value; -o-box-shadow: @value; box-shadow: @value; }