web-dev-qa-db-ja.com

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

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

これが私のサンプルコードです。

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

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

これは補間関数を使用してSassまたはLESSで簡単に実行できることを知っていますが、プリプロセッサなしでそれを行う方法があるかどうか興味があります。

csscss-variables
35
YashArora

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

ただし、url()でこれを行うことはできません。url(var(--url))はurl(関数トークンの後にvar(--url)に続いて)が続くように解析されますが、 url()がURL自体として扱われているため無効な単一のvar(--url)トークン。url()トークン内の引用符で囲まれていないURLは、エスケープしない限り括弧を含むことはできません。これは、パーサーがプロパティ値のvar()式を見ることはないため、実際には置換が行われないことを意味します。実際、background宣言は完全に無効です。

あなたがそれのいずれかを理解しなかったなら、それは大丈夫です。従来の理由により、var()でurl()補間を使用できないことを知ってください。

質問に描かれている問題はレガシーurl()トークンに関連していますが、次のようなことをしようと考えている場合、いくつかのvar()式からURLトークンを構築することもできません。 --uo: url(; --uc: );または--uo: url("; --uc: ");、およびbackground: var(--uo) var(--url) var(--uc);。これは、 カスタムプロパティに一致しない文字列区切り文字またはurl()トークンの一部（不正なURLトークンと呼ばれる）を含めることができないため であるためです。

カスタムプロパティでURLを指定する場合は、url()式全体を記述し、その式全体を置き換える必要があります。

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

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

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

44
BoltClock

Cordovaを使用したプロジェクトでも同じ問題が発生したため、次を使用しました。

header{
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );
}

どうやらrl（ ""）を-var宣言に二重引用符を付けて使用すると、値は機能しません。

0
LucasTelesx