7

IEでグラデーションを生成するために、次のCSSコードに対応するLESSコードを書き込もうとしています。

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 に答える