7

我正在尝试编写与以下 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 代码，两者都提供了相同的结果。有没有办法避免这些空间。谢谢。

4

3 回答 3

10

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

例如

~"bar@{name}foo"

并且不会插入空格。

于 2012-04-30T05:56:55.400 回答
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);
于 2012-07-16T10:23:15.277 回答
0

我对LESS不太熟悉；但是，从我在他们的页面上可以看到：

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

建议不应该~附加到变量上，并且如果您试图通过单引号，它将"'@var'"而不是'"@var"'在内部而不是外部使用单引号。我在这里做了更多的研究，并认为这是一个答案而不是评论。

于 2012-04-30T04:28:13.483 回答