Escape character in LESS CSS inserts unwanted spaces
css, escaping, less
Solution
Use variable interpolation instead of ending the string and restarting it.
E.g.
~"bar@{name}foo"
And no spaces will be inserted.
Problem
I am trying to write the LESS code corresponding to the following CSS code for generating gradient in IE. ``` filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9600',endColorstr='#ff6900'); ``` following is the LESS code: ``` .gradient(@start_color, @end_color) { filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='"@start_color~"',endColorstr='"@end_color~"')"; } .gradient(#ff9600,#ff6900) ``` on compilation it gives the following CSS code: ``` filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #ff9600 ', endColorstr=' #ff6900 '); ``` As you can see there are spaces inserted on both sides of the color values because of which IE doesn't read the colors correctly. I have compiled the LESS code using http://crunchapp.net/ as well as http://winless.org/ and both are providing the same results. Is there a hack to avoid these spaces. Thanks.