CSS拡張のメタ言語であるSassですが、様々な便利機能があり使いこなすことでコーディングが飛躍的に効率よく行うことができます。今回はその中でも「mixin」と「変数」を使ってメディアクエリを管理する方法をまとめていきたいと思います。  

変数でブレークポイントを定義

Sassでは値を変数として扱うことができます。メディアクエリでもディスプレイサイズをpxで指定しますが、その値を変数で定義しておきます。このようにすることで、ブレークポイントに変更があった時でも柔軟に対応することができます。   この後、紹介する例ではBootstrap4に合わせたブレークポイントになっています。この値は案件ごとの仕様に合わせていきます。変数名も適宜わかりやすい名前にしておきます。 ブレークポイント1：1200px ブレークポイント2：992px ブレークポイント3：768px ブレークポイント4：576px   【_variable.scss】

$hd-min: 1200px;
$desktop-max: 1199px;
$desktop-min: 992px;
$laptop-max: 991px;
$laptop-min: 768px;
$tablet-max: 767px;
$tablet-min: 576px;
$mobile-max: 575px;

 

mixinでメディアクエリーを定義

mixinとは関数のようなもので、あるセクションをひとまとめに扱うことができます。実際にはincludeとcontentという機能と合わせて使用します。mixinで定義しておくことでメディアクエリーをより簡潔に記述することができます。   【_mixin.scss】

@mixin screen-hd {
  @media screen and (min-width: $hd-min) {
    @content;
  }
}
@mixin screen-desktop {
  @media screen and (min-width: $desktop-min) and (max-width: $desktop-max) {
    @content;
  }
}
@mixin screen-laptop {
  @media screen and (min-width: $laptop-min) and (max-width: $laptop-max) {
    @content;
  }
}
@mixin screen-tablet {
  @media screen and (min-width: $tablet-min) and (max-width: $tablet-max) {
    @content;
  }
}
@mixin screen-mobile {
  @media screen and (max-width: $mobile-max) {
    @content;
  }
}

  これで下記のようにscssファイルにスタイルを記述していきます。mixinで定義したデバイスごとのメディアクエリーをincludeを使ってまとめていきます。コンパイルすると、メディアクエリーとしてCSS上に書き出されます。   【_sample.scss】

@include screen-mobile {
    // モバイル用のスタイル
    h1 {
        font-size: 18px;
        color: #f00;
    }
}

  【sample.css】

@media screen and (max-width: 575px) {
    h1 {
        font-size: 18px;
        color: #f00;
    }
}

 

---

  レシポンシブコーディングはどうしても複雑でコードが長くなりがちですが、Sassをうまく使うことでスッキリとさせることができます。管理や保守も楽になりますし、コーディングのスピードも早くなるというメリットがあります。効率的なコーディングのために参考にしてみてはいかがでしょうか。