CSS変数(カスタムプロパティ)は、色やサイズの再利用に便利な機能です。
では、**背景画像のパスもCSS変数で管理できるのか?**と考えたことはありませんか?
実は、画像パスの一部として変数を使うことはできません。
本記事ではその理由と、使いどころの見極めについて詳しく解説します。
やりたかったこと
:root { --img-path: "/assets/images"; } .some-class { background-image: url(var(--img-path) + "/bg.png"); }
このように、画像の共通パスを変数でまとめたい!
……ですが、これは動きません。
なぜできないのか?
background-image: url(var(--img-path)/bg.png); /* ❌ 無効 */
url()
の中身は文字列として評価されるため、var()
の展開結果をさらに結合することはできないのです。
使える方法は?
背景画像ごとにURLをCSS変数にしておく方法です:
:root { --bg-texture: url("/assets/images/bg-texture.png"); --header-bg: url("/assets/images/header.png"); } .header { background-image: var(--header-bg); }
この方法であれば、画像の切り替えや一括管理がしやすくなります。
変数にするべきケース/しないべきケース
✔️ 変数にするべき:
- 同じ画像を複数箇所で使っている
- テーマごとに画像を出し分けたい(例:
[data-theme="dark"]
) - 画像URLをあとから切り替える設計を考えている
❌ 変数にしない方がよい:
- 一箇所だけでしか使わない背景画像
- パスの一部だけを変数で使いたいとき(できない)
まとめ
url(var(--path)/file.png)
のような使い方はCSSでは不可能- 画像ごとに
url()
を含む変数を定義するのが現実的 - 背景画像の再利用やテーマ切り替えではCSS変数が有効
おまけ:Sassの方が柔軟!
Sassなら以下のようにパスの一部だけを変数にできます:
$img-path: "/assets/images"; background-image: url("#{$img-path}/bg-texture.png");
SassとCSS変数、それぞれの強みを使い分けるのがベストです!