CODEWITHSUNDEEP
cssescapingless
Tuhin Paul
Tuhin Paul

Reputation: 309

Escape character in LESS CSS inserts unwanted spaces

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.

Upvotes: 7

Views: 7444

Answers (3)

vishnudas
vishnudas

Reputation: 31

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

I just put 

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

and it gets compiled properly as below:

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

Upvotes: 3

Luke Page
Luke Page

Reputation: 8186

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

E.g.

~"bar@{name}foo"

And no spaces will be inserted.

Upvotes: 10

ShoeMaker
ShoeMaker

Reputation: 833

I'm not that familiar with LESS; however, from what I can see on their page:

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

suggests that there should be no ~ attached to the variables and that if you were trying to pass single quotes through, it would be "'@var'" instead of '"@var"' With the single quotes inside instead of outside. I did a little more research here, and think this is an answer instead of a comment.

Upvotes: 0

Related Questions