Zenn
🐡

SassにおけるMedia Queryのベストプラクティス

2021/06/01に公開
CSS
HTML
Scss
tech

Media Queryとは

Webページの見た目を画面の幅に応じて表示を変えるCSSの機能です。１つのページで、レスポンシブに画面の表示を行うことができます。

一般的にCSSでは、以下のように記述します。

style.css
@media screen and (max-width: 600px) {
    h1 {
        color: red;
    }
}
  • 上記の例では、画面幅が600px以下の時、h1の文字色を赤色にします。

SassにおけるMedia Queryのベストプラクティス

Sassでも同様にmedia queryを書くことができますが、どのように使うえば、変更にも強いかつ、シンプルに書けるのかを調べてみました。

  1. map型(key: value)でブレークポイントを定義する。
_breakpoint.scss
$breakpoints: (
    "sm": "screen and (min-width: 400px)",
    "md": "screen and (min-width: 768px)",
    "lg": "screen and (min-width: 1000px)",
    "xl": "screen and (min-width: 1200px)",
) !default;

!defaultは、既に定義されている場合は、更新されないフラグです。これを指定しておけば、$breakpointsが更新されることはありません。

  1. mixinでmedia queryを呼び出す
_mixin.scss
@mixin mq($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

map-get()は第1引数に指定したmap型の変数から、第2引数で指定したkeyを元にそのvalueを取得します。例えば、mqにmdを指定すると、screen and (min-width: 768px)が返却されます。

#{}の書き方はインターポーレーションといって、変数をセレクタやプロパティ名に使用することができます。つまり、#{map-get($breakpoints, $breakpoint)} → screen and (min-width: 768px)となるイメージです。詳しくは以下をご参照ください。

  1. 呼び出し側での使い方
style.scss
@import "_breakpoint";
@import "_mixin";

.test {
    color: blue;

    @include mq(sm) {
        color: yellow;
    }
  
    @include mq(lg) {
        color: red;
    }
}

@include mq(mapのキー)でmixinを呼び、そのブロックにレスポンシブで変えたい設定値を記述するだけで実現できます！とても便利ですね。

まとめ

今回は個人的に思う、SassにおけるMedia Queryのベストプラクティスについて紹介しました。
cssではよくソースの下部にまとめて、media queryを書くことが多いですが、Sassだとレスポンシブで変えたいところに挿入できるので、個人的にはわかりやすいかなって思いました。

Discussion