Lessで組み込み関数をエスケープする方法は？

Question

私は

.linear-gradient(@params) { 
    background-image: linear-gradient(@params); 
    background-image: -webkit-linear-gradient(@params); 
    background-image: -moz-linear-gradient(@params); 
} 

を次のように

.linear-gradient(~"to left, #83111b 0, #83111b 50%, lighten(#83111b, 5%) 50%, lighten(#83111b, 5%) 100%"); 

linear-gradient次は持っているがlighten(#83111b, 5%)を脱出することが可能ですか？ 私はそれを格納する変数を使用することができますが、私はその部分を避けるために好きです。

Answer 1

いいえ、エスケープされた文字列内で組み込み関数を呼び出すことはできません。なぜなら、関数は呼び出し/評価されないため、単一の文字列として扱われるからです。

驚いたことに、この特殊なケースでは、一時変数が不要で、以下のようなものがあるようです。コンパイラが少なくても、すべてを連結して単一のパラメータとして扱うようです。

.linear-gradient(@params) { 
    background-image: linear-gradient(@params); 
    background-image: -webkit-linear-gradient(@params); 
    background-image: -moz-linear-gradient(@params); 
} 
a{ 
    .linear-gradient(~"to left, #83111b 0, #83111b 50%," lighten(#83111b, 5%) ~"50%," lighten(#83111b, 5%) ~"100%"); 
} 

このモデルは、多くの同様のケースでうまく機能していると思われ、無効化されないと思います。実際、スペース区切りで（カンマで区切られていないので）、末尾の余分なセミコロンも必要ありません。 （セミコロンは、コンマ区切りの値が単一のパラメータとみなされる場合にのみ必要です。これは、セミコロンまたはコンマのいずれかをミックスインパラメータセパレータとして使用できるためですが、セミコロンが存在する場合、コンマはもはやセパレータ。）

---

しかし、私はまだそれがより読みやすく、明確に見えますので、以下のようなものをやってお勧めします。

.linear-gradient(@params) { 
    background-image: linear-gradient(@params); 
    background-image: -webkit-linear-gradient(@params); 
    background-image: -moz-linear-gradient(@params); 
} 

a{ 
    @color1: lighten(#83111b, 5%); 
    .linear-gradient(~"to left, #83111b 0, #83111b 50%, @{color1} 50%, @{color1} 100%"); 
} 

Qwertiyによって提案されたオプションも非常に良いものですが、同じミックスインのために他の複数のパラメータがあるとき、それは1つのスペースで区切られた値にすべてを連結してしまうため@argumentsオプションに注意してください。

Answer 2

lighten(#83111b, 5%)をエスケープすることはできますか？

いいえカンマで文字列を渡す場合は、@argumentsを使用して、呼び出し側でブラケットを閉じる前にセミコロンを追加します。

.linear-gradient(@params) { 
    background-image: linear-gradient(@params); 
    background-image: -webkit-linear-gradient(@params); 
    background-image: -moz-linear-gradient(@params); 
} 

間違っ

.linear-gradient(~"to left, #83111b 0, #83111b 50%, lighten(#83111b, 5%) 50%, lighten(#83111b, 5%) 100%"); 

。 linear-gradientは to leftですが、他の2つは rightである必要があります。

また、プレフィックス付きのバリアントを標準のプレースホルダの前に配置するとよいでしょう。