url（）でCSS変数を補間する方法はありますか？

Question

バックグラウンドURLをカスタムプロパティ（CSS変数）に保存し、バックグラウンドプロパティと共に使用したいとします。しかし、url()のパラメータとして使用するときに文字列を補間する方法が見つかりませんでした。ここで

は私のサンプルコードです：

:root { 
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416"; 
} 

body { 
    background: url(var(--url)); 
} 

私は、これは簡単に補間関数を使用してサス以下で行うことができますが、任意の事前せずにそれを行う方法がある場合、私は好奇心が強いことを知っていますプロセッサ。

Answer 1

rgba()（例：hereを参照）を含むほとんどのCSS関数で補間を実行できます。実際、補間はカスタムプロパティの主な機能の1つです。

しかしvar(--url)は、URL自体として扱われているので、url(var(--url))はない)続いvar(--url)続いurl(機能トークンが、無効である単一url()トークンとして解析されるよう、あなたは、url()でこれを行うことができず、 url()トークンの引用符で囲まれていないURLは、エスケープされていない限り、かっこを含むことはできません。これは、パーサーがプロパティ値にvar()式を一切表示しないため、置換が実際には起こらないことを意味します。実際には、background宣言は完全に無効です。

あなたがそれを理解していない場合は、それは問題ありません。レガシーの理由により、url()で補間を使用することはできません。

質問に描か問題はレガシーurl()トークンに関連しているにもかかわらず、あなたはケースには、あなたが--uo: url(; --uc:);または--uo: url("; --uc: ");、およびbackground: var(--uo) var(--url) var(--uc);のようなものをしようとすることを考えた、var()表現のいずれかのいくつかのうちのURLトークンを構築することにより、これを行うことはできません。これは、custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens)です。

カスタムプロパティでURLを指定する場合は、あなたが全体url()表現を記述する必要があり、代替その式全体：

:root { 
    --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416"); 
} 

body { 
    background: var(--url); 
} 

または、補間を実行する代わりにvar()のJavaScriptを使用。