【Sass】変数と@mixinでメディアクエリを簡単に記述する方法

2021年8月3日2021年8月5日

CSSでは、レスポンシブに対応させるためのメディアクエリを書く機会が多いですよね。

特にブレイクポイントの多いサイトだと、以下のように記述量が多くなってしまいがちです。

.block {
  width: 30%;
}

@media screen and (max-width: 1080px) {
  .block {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .block {
    width: 80%;
  }
}

@media screen and (max-width: 480px) {
  .block {
    width: 100%;
  }
}

さらに、ブレイクポイントが変わった場合、メディアクエリを記述した全箇所を書き直す必要があるので、かなり手間がかかります。

そこで今回の記事では、Sassの変数と@mixinの機能を使用してメディアクエリを管理する方法を紹介します！

Sassの変数でブレイクポイントを一括管理
@mixinでメディアクエリを定義
@includeでメディアクエリを呼び出す

これらの機能を使用することで、ブレイクポイントをまとめて管理＆メディアクエリの記述量を大幅に省略することができます！

Sassを使用している方なら必ず使うべきテクニックですので、ぜひ参考にしてみてください。

【コピペ用】Sass変数と@mixinでブレイクポイントを管理するコード

以下にコピペ用のコード一式を用意しました。

詳細については次の章で解説しますので、まずは_mixin.scssファイルを作成し、コピペしてお使いください。

// ブレイクポイントを指定
$pc: 1080px;
$tab: 768px;
$sp: 480px;

@mixin pc {
  @media screen and (max-width: ($pc)) {
    @content;
  }
}

@mixin tab {
  @media screen and (max-width: ($tab)) {
    @content;
  }
}

@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}

このコードを呼び出すには、@includeを使用します。

.block {
  width: 30%;

  @include pc {
    width: 50%;
  }

  @include tab {
    width: 80%;
  }

  @include sp {
    width: 100%;
  }
}

これをコンパイル（CSSに変換）すると、最終的には以下のような形でアウトプットされます。

.block {
  width: 30%;
}

@media screen and (max-width: 1080px) {
  .block {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .block {
    width: 80%;
  }
}

@media screen and (max-width: 480px) {
  .block {
    width: 100%;
  }
}

@mixinを使用することで、少ない記述でメディアクエリを書けるようになりました！

ここまでである程度理解できる方は、ぜひカスタマイズしつつ使ってみてください。

次の章では、紹介したコードを解説していきます。

【解説】Sassでメディアクエリを簡単に記述するための手順

ここからは、上で紹介したコードの解説を行います。

_mixin.scssファイルを作成
Sass変数でブレイクポイントを指定
@mixinでメディアクエリを定義
@includeでメディアクエリを呼び出して使用

上記の順番で説明していきますね。

手順1. _mixin.scssファイルを作成

@mixinで作成するミックスインは、通常は_mixin.scssというファイルにまとめて記述します。

なので、まずは_mixin.scssファイルを作成しましょう。

ファイル名の先頭に_を付けることでこのファイルはパーシャルとなり、コンパイル時にCSSファイルを生成しません。

パーシャルについての詳しい説明は以下の記事をご覧ください。

手順2. Sass変数でブレイクポイントを指定

_mixin.scssファイルの一番上で、ブレイクポイントの値を変数に格納していきます。

// ブレイクポイントを指定
$pc: 1080px;
$tab: 768px;
$sp: 480px;

$変数名: ブレイクポイントの値pxという風にして記述してください。

$pcや$spなど、変数名はなるべく短くすることで使用時の記述が少なくなります。

また、ブレイクポイントに変更があった場合、この1箇所を変更するだけでいいので、管理しやすいですね。

$pc-xl: 1440px;
$sp-s: 375px;
$sp-xs: 320px;

このように、名前と値を指定することでいくらでも設定可能ですので、必要に応じて調整してください。

手順3. @mixinでメディアクエリを定義

ここからは、@mixinを使用してメディアクエリを定義していきます。

手順2で指定した変数を使用するので、変数よりも下に記述してください。

$pc: 1080px;
$tab: 768px;
$sp: 480px;

@mixin pc {
  @media screen and (max-width: ($pc)) {
    @content;
  }
}

@mixin tab {
  @media screen and (max-width: ($tab)) {
    @content;
  }
}

@mixin sp {
  @media screen and (max-width: ($sp)) {
    @content;
  }
}

pc, tab, spという名前のミックスインを作成し、その中にメディアクエリを記述します。

ここではmax-widthを使用しましたが、モバイルファーストで実装する場合はmin-widthに変えてください。

ブレイクポイントの部分は、手順2で設定した$pc, $tab, $spという変数をそれぞれ使用します。

最後に@contentとすることで、使用時に記述したコードをミックスインに渡すことができます。

この部分は少しわかりにくいので、手順4で説明していきますね。

retina対応やIE専用のメディアクエリも使用可能

レスポンシブ対応のメディアクエリ以外でも、@mixinで定義することができます。

ここでは例として、retina対応とIE専用のメディアクエリを使用した例を紹介します。

// retina対応のメディアクエリ
@mixin retina {
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    @content;
  }
}

// IE専用のメディアクエリ
@mixin ie {
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    @content;
  }
}

retina, ieという名前でミックスインを定義しました。

これらは特に記述量が多いので、ミックスインを用意しておくとかなりの時間短縮になります。

手順4. @includeでメディアクエリを呼び出して使用

ここからは、手順3で定義したミックスインを呼び出して使用する方法を見ていきます。

定義した@mixinを呼び出すには、@include ミックスイン名を記述します。

.block {
  width: 30%;
  background-image: url('sample.jpg');

  @include pc {
    width: 50%;
  }

  @include tab {
    width: 80%;
  }

  @include sp {
    width: 100%;
  }

  @include retina {
    background-image: url('sample@2x.jpg');
  }
}

@includeで呼び出したミックスインの中身は、@contentとしてミックスインに渡されます。

@include pc {
  // ここに入るコードを@contentとしてミックスインに渡す
}

これをCSSに変換すると、最終的には以下のようになります。

.block {
  width: 30%;
  background-image: url("sample.jpg");
}

@media screen and (max-width: 1080px) {
  .block {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .block {
    width: 80%;
  }
}

@media screen and (max-width: 480px) {
  .block {
    width: 100%;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .block {
    background-image: url("sample@2x.jpg");
  }
}

メディアクエリをベタ書きするのに比べて、記述量がかなり少なくなっていますね。

これで解説は終わりです！