Sassのmixinを使ってメディアクエリを管理しやすくするスニペットまとめ

今回はブレイクポイントごとにメディアクエリが増えていき、管理がしきれなくなったり面倒になりがちなメディアクエリを、Sassのmixinを使って管理しやすくするスニペットをいくつか紹介します。

 

条件分岐を使う方法

まずは条件によってメディアクエリを分岐する方法です。

ブレイクポイントをつかしたい場合は条件分岐も追加し、もし不要になったらそのまま削除するだけです。

ブレイクポイントは数値ではなく、smallやmediumといった名前で用意しておき、使用時にはこれを引数に指定します。

こうしておけばあとで変更が入った場合でも、mixin内で記述している数値だけ変更すればメディアクエリを指定している部分に数値が反映されます。また、サイト内にどれくらいのブレイクポイントがあるのかも把握できます。

@mixin mq($breakpoint: medium) {
  @if $breakpoint == xsmall {
    @media screen and (min-width: 320px) {
      @content;
    }
  } @else if $breakpoint == small {
    @media screen and (min-width: 600px) {
      @content;
    }
  } @else if $breakpoint == medium {
    @media screen and (min-width: 768px) {
      @content;
    }
  } @else if $breakpoint == large {
    @media screen and (min-width: 1024px) {
      @content;
    }
  } @else if $breakpoint == xlarge {
    @media screen and (min-width: 1280px) {
        @content;
    }
  }
}

 

使用法は以下のようになります。デフォルトではmediumになっているので、mediumの時は@include mqのみでも大丈夫です。

他のサイズにする時は引数に先ほど決めた名前を指定しましょう。

.elements {
  @include mq {
    /* @include mq */
  }
  @include mq(large) {
    /* @include mq(large) */
  }
}

 

マップを使う方法1

マップを使う方法は先ほどの条件分岐よりも見た目がスッキリしています。ブレイクポイントの追加や削除も簡単に可能です。

見た目は結構変わりましたが、ブレイクポイントはやはり数値ではなくsmallやmediumといったもので用意してあるので、使いたいブレイクポイントを引数に指定すればメディアクエリを使用できます。

同じくデフォルトではmediumになっているので、mediumの時は@include mqのみでも大丈夫です。

$mq-breakpoints: (
  'xsmall': 320px,
  'small' : 600px,
  'medium': 768px,
  'large' : 1024px,
  'xlarge': 1280px,
);

@mixin mq($breakpoint: medium) {
  @media screen and (min-width: #{map-get($mq-breakpoints, $breakpoint)}) {
    @content;
  }
}

 

使用する時は以下のように記述します。

.elements {
  @include mq {
    /* @include mq */
  }
  @include mq(large) {
    /* @include mq(large) */
  }
}

 

マップを使う方法2

上記の2つはいずれもmin-widthのみを使用していますが、こちらの方法はmin-widthに加えてmax-widthでの指定も簡単にできるようにした方法です。

こちらもブレイクポイントにはマップを使っています。

$mq-breakpoints: (
  'xsmall': 320px,
  'small' : 600px,
  'medium': 768px,
  'large' : 1024px,
  'xlarge': 1280px,
);

@mixin mq($breakpoint: medium, $rule: min, $subtraction: false) {
  $breakpoint: map_get($mq-breakpoints, $breakpoint);
  @if $rule == max and $subtraction {
    $breakpoint: $breakpoint - 1;
  }
  @media screen and (#{$rule}-width: $breakpoint) {
    @content;
  }
}

 

min-widthを使う場合は上と同じようにように@include mqや@include mq(large)というように記述します。

.elements {
  @include mq {
    /* @include mq */
  }
  @include mq(large) {
    /* @include mq(large) */
  }
}

 

max-widthを指定する場合は第二引数にmaxを指定することで使用できます。

また詳しくは後述しますが、ネストを使用する時は第三引数でtrueを指定するとブレイクポイントの値から-1した値でmax-widthを出力します。

.elements {
  @include mq(small, max) {
    /* @include mq(small, max) */
  }
  @include mq(large, max, true) {
    /* @include mq(large, max, true) */
  }
}

 

ネストと組み合わせて使用する

これまで紹介してきた方法はmax-width、もしくはmin-widthのどちらかを使用していましたが、ネストと組み合わせて使用すれば(min-width: 768px) and (max-width: 1023px)のように組み合わせてメディアクエリを指定することが可能です。

単純にmixinの第二引数にmaxを指定してもいいのですが、次のブレイクポイントのことも考えてmax-widthの値を1減らして使用するようにします。

なのでネストと組み合わせて使用する場合は第三引数にtrueを指定して-1するようにします。

第三引数では減算するかどうかを指定します。デフォルトはfalseになっていますが、trueを指定すると-1される仕組みです。