Carácter de escape en MENOS CSS inserta espacios no deseados

Question

Estoy tratando de escribir el código LESS correspondiente al siguiente código CSS para generar degradado en IE.

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

siguiente es el código MENOS:

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

en la compilación da el siguiente código CSS:

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

Como se puede ver hay espacios insertados en ambos lados del color de valores debido a que IE no lee los colores correctamente.

He compilado el código LESS usando http://crunchapp.net/ y http://winless.org/ y ambos están dando los mismos resultados. ¿Hay algún truco para evitar estos espacios? Gracias.

Answer 1

Utilice la interpolación variable en lugar de finalizar la cadena y reiniciarla.

E.g. se insertará

~ "barra @ {nombre} foo"

y sin espacios.

Answer 2

No estoy tan familiarizado con LESS; Sin embargo, por lo que puedo ver en su página:

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

sugiere que no debería haber ningún ~ unido a las variables y que si estuviera tratando de pasar comillas simples a través, sería "'@var'" en lugar de '"@var"' Con el comillas simples dentro en lugar de afuera. Hice un poco más de investigación aquí, y creo que esta es una respuesta en lugar de un comentario.

Answer 3

estoy usando LESS.app (www.lesscss.org) ...

acabo de poner

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

y se compila correctamente de la siguiente manera:

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