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

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でメディアクエリを簡単に記述するための手順

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

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

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

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

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

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

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

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

_mixin.scssのパーシャルを作成できたら、親のSassファイルstyle.scssにインポートします。

@import './mixin';

これでミックスインを使用する準備ができましたので、次は_mixin.scssの中身を記述していきます。

手順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");
  }
}

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

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

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

Sassの変数と@mixin機能を利用して、簡単にメディアクエリを記述する方法を紹介しました。

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

ブレイクポイントが多いサイトほど、メディアクエリの記述量も増えてきます。

今回のテクニックを使用することで、記述量を大幅に減らすことが可能なので、ぜひ使ってみてください!

これを機にSassを学んでみたいという方は、以下の記事で勉強方法を紹介していますので、興味があればどうぞ。

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!

コメント

コメントする

目次
閉じる