Question

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.

Answer 1

Use variable interpolation instead of ending the string and restarting it.

E.g.

~”bar@{name}foo”

And no spaces will be inserted.