Escape character in LESS CSS inserts unwanted spaces

Question

I am trying to write LESS code corresponding to the following CSS to generate a gradient in IE.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9600',endColorstr='#ff6900'); 

Below is the LESS code:

 .gradient(@start_color, @end_color) { filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='"@start_color~"',endColorstr='"@end_color~"')"; } .gradient(#ff9600,#ff6900) 

when compiling it gives the following CSS code:

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #ff9600 ', endColorstr=' #ff6900 '); 

As you can see, spaces are inserted on both sides of the color values, because of which IE does not correctly read the colors.

I compiled LESS code using http://crunchapp.net/ as well as http://winless.org/ and both providing the same results. Is there a hack to avoid these spaces. Thanks.

Answer 1

Use interpolation variable instead of line ending and restart it.

eg.

~ "bar @ {name} Foo"

And no spaces will be inserted.

Answer 2

I am using LESS.app ( www.lesscss.org ) ...

I just put

 filter: progid:dximagetransform.microsoft.gradient(startColorstr='@{start}', endColorstr='@{stopColor}', GradientType=0); 

and it compiles properly, as shown below:

 filter: progid:dximagetransform.microsoft.gradient(startColorstr='#76787a', endColorstr='#9d9ea0', GradientType=0); 

Answer 3

I am not familiar with LESS ; however, from what I see on their page:

 .class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; } 

assumes that there should not be ~ variables, and if you try to pass single quotes, it will be "'@var'" instead of '"@var"' with single quotes inside and not outside. I have done a bit more research here and think this is the answer instead of the comment.