Sassの@mixinを使ってメディアクエリを指定する方法【コーディング爆速】

本記事では、Sassの@mixin(ミックスイン)を使って、メディアクエリを指定する方法を解説します。

@mixinを使えば、コード量をかなり抑えられコーディングを爆速で進められるのでぜひ覚えましょ！

【コピペ用】@mixinを使ってメディアクエリを指定する方法

下記がコードの全文です。（読みやすいように改行を入れています。）

使用しているstyle.scssにコピペすれば@includeでメディアクエリを呼び出せます。

// 変数定義
$pc: 1024px;
$tab: 768px;
$sp: 480px;

// mixin定義
@mixin pc {
  @media (min-width: $pc) {
    @content;
  }
}

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

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

// 使用例
.my-class {
  // PCのメディアクエリ
  @include pc {
    font-size: 14px;
  }
  // タブレットのメディアクエリ
  @include tab {
    font-size: 14px;
  }
  // SPのメディアクエリ
  @include sp {
    font-size: 12px;
  }
}

以下からひとつひとつの手順を解説します。

手順1：変数と@mixin（ミックスイン）を指定する

変数の指定

まず各メディアクエリのブレークポイントを変数で管理します。

// 変数定義
$pc: 1024px;
$tab: 768px;
$sp: 480px;

この部分ですね。任意のpx数を指定してください。こうしておくことで途中でブレークポイントを変えないといけないときも変数の値を変更するだけですべてに適用できます。

@mixin（ミックスイン）を指定する

次にmixinを作ります。

// mixin定義
// PCサイズ
@mixin pc {
  @media (min-width: $pc) {
    @content;
  }
}
// タブレットサイズ
@mixin tab {
  @media (max-width: $pc) and (min-width: $tab) {
    @content;
  }
}
// SPサイズ
@mixin sp {
  @media (max-width: $tab) {
    @content;
  }
}

これだけ見るとめちゃくちゃ分かりづらいですが、ミックスインの構文がわかればなんとなく理解できるはず。

@mixin（ミックスイン）の書き方

SCSS

//mixinの定義
@mixin @includeで呼び出す名前 {
     （任意のスタイルを定義）
     @content
}

// includeで呼び出す
@include mixiｎ-name {
    （ここに@contentが入る）
}

@contentがややこいと思うかもですが、@includeで呼び出したときに｛｝の中に入る値が@contentです。

@mixinの詳細はまた別の記事で解説します。

手順2：@includeで@mixinを呼び出す

次に@includeで定義したミックスインを呼び出します。実際に使い方を見たほうが早いので下記。

（.my-classには好きなセレクタ名を指定してください）

// 使用例
.my-class {
  // PCのメディアクエリ
  @include pc {
    font-size: 14px;
  }
  // タブレットのメディアクエリ
  @include tab {
    font-size: 14px;
  }
  // SPのメディアクエリ
  @include sp {
    font-size: 12px;
  }
}

CSSのコンパイル結果はこうなります。

@media (min-width: 1024px) {
  .my-class {
    font-size: 14px;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .my-class {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .my-class {
    font-size: 12px;
  }
}

こんな感じで、メディアクエリがかんたんに指定できるぜい！！