3

これは本当に簡単に見つかるはずですが、運が悪いだけです。線形グラデーションのパラメトリック ミキシングを作成し、呼び出すときに新しい変数を渡すことで後で変更できるデフォルト値を持ついくつかの変数を用意したいと考えています。しかし、変数を渡そうとすると、何らかの理由で構文エラーが発生します。

これが私のミックスインです：

.gradient (@startColor: #adc7e7; @endColor: #ffffff) {
background-color: @endColor;
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
background: -moz-linear-gradient(top, @startColor, @endColor);
background: -ms-linear-gradient(top, @startColor, @endColor);
background: -o-linear-gradient(top, @startColor, @endColor);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startcolor', endColorstr='@endColor', GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor',endColorstr='@endColor',GradientType=1);
}

このように呼び出すと、問題ありません（デフォルトの色を使用するだけです）...

.test {background: .gradient; }

しかし、from または to の色を変更するためにこのように呼び出すと、コンパイル時に構文エラーが発生します...

.test {background: .gradient(#eeeeee,#ffffff); }
/* semicolon between the values don't work either */

私はこれを書くさまざまな方法を試しましたが、運がありません。LESS のドキュメントはまったく役に立ちません。グラデーションに使用する方法がわからない @arguments 変数を使用しています。

Mac、バージョン 2.8、ビルド 969 用の LESS コンパイラ (incident57 から) を使用しています。

4

2 に答える 2

0

あなたには2つの主な問題があります

最初に、すでにbackgroundmixin にプロパティを含めています。これは正しい構文ですが、プロパティの値のように呼び出すのは正しくありません。

.test {background: .gradient(#eeeeee,#ffffff); }

むしろ、次のようにする必要があります。

.test {.gradient(#eeeeee,#ffffff); }

2つ目は、2 つのfilter呼び出しで変数の構文が異なる必要があるということです。変数は単一引用符で囲まれているためです。そのため、次のように変更する必要があります (変数の名前を囲む{括弧に注意してください)。}

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}', endColorstr='@{endColor}', GradientType=1);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startColor}',endColorstr='@{endColor}',GradientType=1);
于 2013-07-09T22:46:28.017 に答える