Question

我正在尝试编写与以下CSS代码对应的LESS代码，用于在IE中生成渐变。

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

以下是LESS代码：

.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代码，两者都提供了相同的结果。是否存在避免这些空间的黑客行为。感谢。

Answer 1

使用变量插值而不是结束字符串并重新启动它。

E.g。

〜 “栏@ {名称} foo” 的

不会插入任何空格。

Answer 2

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

Answer 3

我对LESS并不熟悉;但是，从我在他们的页面上看到的内容：

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

表示变量不应附加~，如果您尝试传递单引号，则会"'@var'"而不是'"@var"'内部使用单引号而不是外面。我在这里做了一些研究，认为这是一个答案而不是评论。

LESS CSS中的转义字符会插入不需要的空格

3 个答案: