LESS CSS中的轉義字符插入不需要的空格

我正在嘗試編寫對應於以下CSS代碼以在IE中生成漸變的較少代碼。LESS CSS中的轉義字符插入不需要的空格

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不能正確讀取顏色。

我編譯了使用http://crunchapp.net/以及http://winless.org/的LESS代碼，兩者都提供了相同的結果。是否有黑客來避免這些空間。謝謝。

來源

2012-04-30 Tuhin Paul

使用變量插值而不是結束字符串並重新啓動它。

E.g.

〜「吧@ {name}的富」

而且沒有空間將被插入。

來源

2012-04-30 05:56:55

這工作:)。非常感謝！ –

我不熟悉LESS;然而，從我可以自己的網頁上看到：

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

建議，應該沒有~連接到變量，如果你試圖通過傳遞單引號，這將是"'@var'"而不是'"@var"'隨着單引號而不是外引號。我在這裏做了一些更多的研究，並認爲這是一個答案，而不是評論。

來源

2012-04-30 04:28:13 ShoeMaker

這並不爲工作它會使編譯器將變量名視爲字符串而不是變量，變量名將顯示在編譯的CSS中。 –

我使用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);

來源

2012-07-16 10:23:15 vishnudas

LESS CSS中的轉義字符插入不需要的空格

回答

相關問題