【SCSS】画像パスを変数で指定する方法！インターポレーションの活用例

画像パスを変数で指定するメリット

SCSSで画像パスを変数として管理することで、以下のようなメリットがあります。

• 管理が楽になる

  パスを変更したい場合、一箇所修正するだけでOK

• コードがスッキリする

  同じパスを何度も書く必要がない

• 保守性が向上する

  チーム開発でも一貫したパス指定ができる

SCSSで画像パスを変数にする基本の書き方

基本的な変数の使い方

解説

• $IMG_PATHに画像フォルダのパスを格納

• #{$IMG_PATH}logo.pngのように、インターポレーション#{$}を使って動的にパスを組み立てる

これにより、フォルダ構成が変わった場合でも、変数を一箇所変更するだけで済みます。

インターポレーションとは？

SCSSでは#{$変数}という記法を使うと、変数の値を文字列として埋め込むことができます。

これは、通常の文字列結合とは異なり、SCSSのコンパイル時に適用されます。

インターポレーションを活用した応用例

①複数の画像パスを動的に指定する

たとえば、ダークモードとライトモードで画像を切り替える場合、以下のように記述できます。

• $themeの値を"dark"にすると/assets/images/button-dark.pngが適用

• $themeの値を"light"にすると/assets/images/button-light.pngが適用

②メディアクエリと組み合わせる

レスポンシブ対応で、デバイスごとに異なる画像を適用する場合にも便利です。

スマホサイズではbanner-mobile.jpg、PCサイズではbanner-desktop.jpgが適用されます。

SCSSで画像パスを指定するときによくあるエラーとその対処法

変数が適用されない

• 原因

  url()内で#{$}を使っていない可能性があります。

• 対処法

  url("#{$変数}")の形にする

誤った書き方

補足: SCSSの変数展開は、url()の中でそのまま使えないため、#{$変数}を用いる必要があります。

正しい書き方

画像が表示されない（相対パスの問題）

• 原因

  コンパイル後のCSSファイルの場所を基準に画像パスを指定していない可能性がある。

• 対処法

  １．コンパイル後のCSSファイルから見た相対パスを指定する。

  ２．SCSSの場所に依存しない形で画像を指定したい場合は、ルートパスで記述する方法もある。

  SCSS

  Copy

  1. $IMG_PATH: "/images/"; // ルートパスで指定
  3. .logo {
  4.   background-image: url("#{$IMG_PATH}logo.png");
  5. }

まとめ

SCSSで画像パスを変数化し、インターポレーションを活用することで、管理の手間を大幅に削減できます。

• 画像パスを変数にすることで、コードがスッキリ＆保守性UP

• #{$}を使えば動的にパスを生成可能

• レスポンシブ対応やテーマ変更にも応用できる

SCSSを活用して、効率的なスタイル設計を実現しましょう！