Caratteri di escape in LESS CSS inserisce spazi indesiderati

Question

Sto provando a scrivere il codice LESS corrispondente al seguente codice CSS per generare gradiente in IE.

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

seguito è riportato il codice meno:

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

sulla compilation dà il seguente codice CSS:

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

Come potete vedere ci sono spazi inseriti su entrambi i lati del colore valori a causa dei quali IE non legge correttamente i colori.

ho compilato il codice meno utilizzando http://crunchapp.net/ nonché http://winless.org/ ed entrambi stanno fornendo gli stessi risultati. C'è un trucco per evitare questi spazi. Grazie.

Answer 1

Utilizzare l'interpolazione variabile invece di terminare la stringa e riavviarla.

E.g. sarà inserito

~ "bar @ {nome} foo"

e senza spazi.

Answer 2

Non sono così familiare con LESS; però, da quello che posso vedere nella loro pagina:

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

suggerisce che non ci dovrebbe essere ~ attaccato alle variabili e che se si stava tentando di passare virgolette singole attraverso, sarebbe "'@var'" anziché '"@var"' Con il singole virgolette interne anziché esterne. Ho fatto qualche ricerca in più qui, e penso che questa sia una risposta al posto di un commento.

Answer 3

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

ho appena messo

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

e viene compilato correttamente come di seguito:

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