少し前にこれと同様の質問をしたところ、すばらしい回答がありました。残念ながら、今回の回答は十分ではなく、質問は少し複雑です。
現在、LESSHatミックスインでLESSを使用してテーマを作成しています。いくつかの色を変数として定義し、現在、LESSHat のmixin を使用してグラデーションを定義しようとしています。問題は、mixin が各グラデーション パラメーターの一連の引数ではなく、単一の引数として文字列を受け入れることです。次に例を示します。.gradient()
#element {
.gradient(~"linear-gradient(90deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)");
}
上記ですべてがうまくいき、文字列補間を使用して文字列内で変数を使用できます（つまり@{color-var}）。ただし、次のような変数に対していくつかの関数を実行したいと思います。
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, darken(@green, 10%) 50%, darken(@green, 10%) 100%)");
問題は、darken(@green, 10%)がコンパイルされないことです。一部のブラウザは、この色を単純に として解釈しgreenます。darken()そのための別の変数を作成せずに、上記の文字列内に関数の戻り値を含める正しい方法を誰かが知っていますか?
参考までに、次のことを試してみましたが、役に立ちませんでした。
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, "darken(@green, 10%)" 50%, "darken(@green, 10%)" 100%)");
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, {darken(@{green}, 10%)} 50%, {darken(@{green}, 10%)} 100%)");