【Sass】@mixinで背景画像のbackgroundプロパティを簡潔に記述する方法

2022年3月31日

CSSで背景画像を指定するとき、以下のように記述が多くなりがちですよね。

.bg {
  background-image: url(sample.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

background系のプロパティを複数記述する必要があるので、背景画像が多いサイトだと手間がかります。

そこで今回の記事では、Sassの@mixin機能を使用して、背景画像のbackgroundプロパティを簡潔に記述する方法を紹介します。

今回紹介する方法を使用すると、上記のCSSがたったの1行で書けるようになります。

.bg {
  @include bg-img($path: 'sample.jpg');
}

背景画像を多用するサイトではかなり効率がアップするので、ぜひ試してみてください。

使い方1. 背景画像プロパティをまとめた@mixinを作成する

まずは背景画像のプロパティ一式をまとめた@mixinを作成します。

_mixin.scssなどのミックスインをまとめる用のパーシャルファイルを作成し、以下のコードをコピペしてください。

@mixin bg-img($path, $size: cover, $pos: center center, $repeat: no-repeat) {
  background-image: url($path);
  background-size: $size;
  background-position: $pos;
  background-repeat: $repeat;
}

ミックスインの名前をbg-imgとし、引数を4つ用意した上でそれぞれにデフォルト値を指定しています。

$path…画像へのパス
$size…background-sizeに指定する値（デフォルト値はcover）
$pos…background-positionに指定する値（デフォルト値はcenter center）
$repeat…background-repeatに指定する値（デフォルト値はno-repeat）

よく使用する値をデフォルト値として設定していますが、ここは各自カスタマイズしてください。

画像パスだけは都度変更する必要があるので、デフォルト値は設定していません。

これでミックスインは定義できたので、次で実際に使用する方法を見ていきましょう。

使い方2. 作成した背景画像@mixinを@includeで呼び出す

作成した@mixinは、@includeで呼び出すことができます。

.bg {
  @include bg-img($path: 'sample.jpg');
}

引数$pathには、上の例のようにして背景画像へのパスを記入してください。

これをCSSにコンパイルすると、以下のような結果になります。

.bg {
  background-image: url(sample.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

たった1行でこれだけの量を記述できるので、かなり手間が省けますね。

デフォルト値に設定した値を上書きして使用したい場合

もしデフォルト値に設定した値を上書きしたい場合は、以下のように記述します。

.bg {
  @include bg-img($path: 'sample.jpg', $size: contain, $pos: left top, $repeat: repeat);
}

$size, $pos, $repeatに値を渡すことで、デフォルト値を上書きすることができます。

これをコンパイルすると、以下のような結果になります。

.bg {
  background-image: url(sample.jpg);
  background-size: contain;
  background-position: left top;
  background-repeat: repeat;
}

これで背景画像のプロパティを柔軟かつ簡潔に書けるようになりました。

【まとめ】Sassの@mixinで背景画像のbackgroundプロパティを簡潔に記述する方法

背景画像関連のプロパティをSassのミックスインで簡潔に記述する方法を紹介しました。

// @mixinを定義
@mixin bg-img($path, $size: cover, $pos: center center, $repeat: no-repeat) {
  background-image: url($path);
  background-size: $size;
  background-position: $pos;
  background-repeat: $repeat;
}

// @mixinを呼び出す
.bg {
  @include bg-img($path: 'sample.jpg');
}

// @mixinを呼び出す（デフォルト値を上書き）
.bg {
  @include bg-img($path: 'sample.jpg', $repeat: repeat);
}

背景画像を多用するサイトでは特に役に立つかと思いますので、ぜひ皆さんも使用してみてください。