SASSでメディアクエリのベストプラクティスを探ってみた

SASSのメディアクエリ記述のベストプラクティス

• 駆け出しウェブデザイナーやフロントエンドエンジニアの方、
• それらを目指していて効率的なsassの記述を学びたい方
  このような方々の参考になると思ったので、自分のためにもアウトプットしてみます。

結論、map-get()を活用すると、とても良いです。

「んなもん知っとるわ」と思った方は、ここで読了してください（笑）

ノーマルプラクティス

まずは一般的な書き方がこんな感じだと思います。
※他のやり方もあります。

var.scss

//変数定義をまとめたファイル

//ブレークポイントを変数化
$pc: 796px; //パソコン
$sp: 420px; //スマホ
@mixin pc {
  @media screen and (min-width: ($pc)) {　 //引数に上記の変数を入れる
    @content;
  }
}
@mixin sp {
  @media screen and (max-width: ($sp)) {　 
    @content;
  }
}

↓呼び出し側のスタイル
※2022年で廃止された@importの代わりに@useを使用

index.scss

@use 'var';
//mixinで定義したmedia queryを呼び出す
@include var.pc {
    height: 105vh;
  }

@include var.sp {
    height: 90vh;
  }

もちろん、この記述が悪いわけではありません。

しかし、
ブレークポイントがさらに細分化されて数が増えると、
その分mixinの記述量も増やさないといけません。

例えば、
「PCやSPだけでなく、タブレットや最小サイズのスマホにも細かく対応したい」
といった場合、おそらくこうなります。

var.scss

$pc: 796px; //パソコン
$tablet: 795px; //タブレット
$sp: 420px; //スマホ
$small-screen: 320px; //最小スマホ
);
@mixin pc {
  @media screen and (min-width: ($pc)) {　
    @content;
  }
}
@mixin tablet {
  @media screen and (max-width: ($tablet)) {　 
    @content;
  }
}
@mixin sp {
  @media screen and (max-width: ($sp)) {　 
    @content;
  }
}
@mixin small-screen {
  @media screen and (max-width: ($small-screen)) {　 
    @content;
  }
}

↓呼び出し側の記述

index.scss

@use 'var';

@include var.pc {
    height: 105vh;
  }
@include var.tablet {
    height: 100vh;
  }
@include var.sp {
    height: 90vh;
  }
@include var.small-screen {
    height: 80vh;
  }

可読性が低いわけではありませんが、実は定義する側の記述量をもう少し減らせます。
それが、次にご紹介する map-get() です。

ベストプラクティス

map-get（）のおかげで、トータルの記述量がとても楽になります。
ブレークポイントの数がどれだけ増えても、
都度引数を渡すだけで再利用できるので、定義するmixinの数は1つだけでいいからです。

var.scss

//map型(key: value)でブレークポイントを定義する。
$breakpoints: (
  "pc": "screen and (min-width: 796px)",
  "tablet": "screen and (max-width: 795px)",
  "sp": "screen and (max-width: 420px)",
  "small-screen": "screen and (max-width: 320px)",
);

@mixin breakPoint($key) {
  @media #{map-get($breakpoints, $key)} {
    @content;
  }
}

↓呼び出し側のスタイル

index.scss

@use 'var';
  @include var.breakPoint("pc") {
    height: 105vh;
  }
  @include var.breakPoint("tablet") {
    height: 100vh;
  }
  @include var.breakPoint("sp") {
    height: 90vh;
  }
  @include var.breakPoint("small-screen") {
    height: 80vh;
  }

1、map-get()

map-get()は、第1引数に指定した変数から、第2引数で指定したkeyを元にその値を取得します。

例えば、varで定義したbreakpointに引数pcを指定すると、screen and (min-width: 796px)が返されます。

まとめ

レスポンシブ対応がほとんどないプロジェクトでしたら、ノーマルプラクティスでもいいのかもしれませんが、知っておくとすごく便利だと私は思いました。

まだまだ勉強不足な点もありますので、補足などありましたら遠慮なくコメントくださいませ。