Escape character в LESS CSS вставляет нежелательные пробелы

Question

Я пытаюсь написать код LESS, соответствующий следующему CSS-коду для генерации градиента в IE.

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

Ниже приводится МЕНЬШЕ код:

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

на компиляции дает следующий код CSS:

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

Как вы можете видеть, что есть пробелы, вставленные с обеих сторон цвета значения, из-за которых IE не корректно считывает цвета.

Я скомпилировал код LESS с помощью http://crunchapp.net/, а также http://winless.org/ и обе эти же результаты. Есть ли взлом, чтобы избежать этих пространств. Благодарю.

Answer 1

Использовать переменную интерполяцию вместо окончания строки и перезапускать ее.

E.g.

~ "бар @ {имя} Foo"

И без пробелов будет вставлен.

Answer 2

Я не знаком с LESS; Однако, из чего я могу видеть на своей странице:

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

предполагает, что не должно быть никаких ~ приложенный к переменным и что, если вы пытаетесь пройти одиночные кавычки через, это было бы "'@var'" вместо '"@var"' С одиночные кавычки внутри, а не снаружи. Я сделал здесь немного больше исследований и думаю, что это ответ вместо комментария.

Answer 3

Я использую LESS.app (www.lesscss.org) ...

Я просто положить

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

и компилируется правильно, как показано ниже:

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