Sassで作る！便利なメディアクエリのmixin

• Web Create
• 2017.04.10

ブレイクポイントを効率よく管理したい！

ブレイクポイントを効率よく管理するために、mixin を作りました。
メディアクエリの様々なパターンに対応できるように作ってみましたので、
ご活用いただければ幸いです。

SCSS

$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1024,
  'xl': 1200,
) !default;

@mixin mq($mq, $bp1: md, $bp2: lg) {

  $w1    : map-get($breakpoints, $bp1);
  $w2    : map-get($breakpoints, $bp2);
  $min1  : 'min-width: #{convert-em($w1, 1)}';
  $min2  : 'min-width: #{convert-em($w1, 1)}';
  $max1  : 'max-width: #{convert-em($w1)}';
  $max2  : 'max-width: #{convert-em($w2)}';

  @if $mq == min {
    @media screen and ($min1) {
      @content;
    }
  }
  @else if $mq == max {
    @media screen and ($max1) {
      @content;
    }
  }
  @else if $mq == min-max {
    @media screen and ($min2) and ($max2) {
      @content;
    }
  }
}

@function convert-em($width, $ge: 0) {
  @return '#{($width + $ge) / 16}em';
}

連想配列、if文、関数と、もはやCSSというよりJS読んでるみたいですが、
利用するのは難しくありません。

max-width の指定

max-width: 768px

まずは一番利用すると思われる使い方です。
768px 以下に指定したい場合、下記のようにします。

// @media screen and (max-width: 768px) と同じ
@include mq('max') {
 div {
   background: blue;
 }
}

すると下記のように出力されます。

@media screen and (max-width: 48em) {
  div {
    background: blue;
  }
}

max-width: 1024px

1〜6行目でサイズを指定していますので、引数で呼び出すことが出来ます。
第二引数で lg を指定します。

// @media screen and (max-width: 1024px) と同じ
@include mq('max', 'lg') { // ←ここで lg を指定しています。
 div {
   background: blue;
 }
}

lg = 1024 を指定しているため、書き出し後はこうなります。

@media screen and (max-width: 64em) {
  div {
    background: blue;
  }
}

今回用意しているのは、sm、md、lg、xl の4種類なので、
その中からサイズを指定してください。
必要に応じて増やすこともできます（後述）

min-width の指定

min-width 769px

min-width を利用したい場合は第一引数を min にします。

// @media screen and (min-width: 769px) と同じ
@include mq('min') { // ← min にする
 div {
   background: blue;
 }
}

書き出し後はこのように。

@media screen and (min-width: 48.0625em) {
  div {
    background: blue;
  }
}

min-width 321px

max-width の時と同様、第二引数でサイズを指定できます。

@include mq('min', 'sm') { 
 div {
   display: blue;
 }
}

書き出し後はこのように。

@media screen and (min-width: 21.3125em) {
  div {
    display: blue;
  }
}

(min-width: 341px) and (max-width: 768px)

min から max までの指定もできます。
第二引数で第三引数でサイズを指定してください。

@include mq('min-max', 'sm', 'md') {
 div {
   display: block;
 }
}

書き出し後。

@media screen and (min-width: 21.3125em) and (max-width: 48em) {
  div {
    display: blue;
  }
}

使い方の解説は以上です。

仕組み

以下では簡単にこの mixin の仕組みを解説します。

1. ブレイクポイントを用意する

1〜6行目で利用したいブレイクポイントを用意します。
配列に追加すれば、ブレイクポイントを増やせます。

$breakpoints: (
  'sm': 340,
  'md': 768,
  'lg': 1024,
  'xl': 1200,
  'xxl' : 1400,
) !default;

2. px を em に変換

34〜36行目は px を em に変換する関数です。
min-width の時など 1px プラスしたい場合もあるので、
その辺も考慮してます。

3. if文で出し分け

8〜32行目が mixin の本体になります。
10〜15行目で、em に変換したり、受け取った値を処理しています。

まとめ

ブレイクポイントを固定値にしていると修正が入った時に面倒なことになるので、
mixin を用意しないとなー、とは前から思っていたのですが、
ようやく余裕ができて作ることが出来ました。どこかにバグがないか心配ではありますが。

作りながらSassってこんなことも出来るんだ、
とちょっと感動してしまいました。