メディアクエリをsassで設定するmixin

今まで　〜どんどんmixin作る

今まで、数値を変数にしたりしつつ、こんな感じのメディアクエリを作って使いまわしてましたが、

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

mixin増えていくし、なんかかっこいい系に引数つけてちょっとまとめてみようかと。

とはいえ、bootstrapに使われているのをはじめ、色々同じこと書いてらっしゃるblogとかあるんですけどね。

改善？しよう。　〜mixinおまとめ

まずbreakpointを変数に設定

$bp-smartphone-portrait: 520px;
$bp-tablet-portrait: 768px;
$bp-laptop_s: 1000px;
$bp-tablet-landscape: 1024px;
$bp-laptop_m: 1366px;
$bp-laptop_l: 1920px;

で、連想配列にする
（↑で作った変数を全て入れてはないのは、6バージョンも実際にはごにゃごにゃしないだろうな〜　というところで、捨てました。必要に応じて入れ替えればいいさ。）

$breakpoints:(
  xs: $bp-smartphone-portrait,
  sm: $bp-tablet-portrait,
  md: $bp-tablet-landscape,
  lg: $bp-laptop_m,
  xl: $bp-laptop_l
) !default;

まずは小さいスクリーン優先のmixin。
呼び出しかたは@include mediaQuery-up(sm)で、引数に指定したサイズ以上のスクリーンサイズ用のメディアクエリに。

@mixin mediaQuery-up($breakpoint) {
  @media ( min-width: #{map-get($breakpoints, $breakpoint)} ) {
    @content;
  }
}

大きいスクリーン優先のmixin。
呼び出しかたは@include mediaQuery-down(sm)で、引数に指定したサイズ以下のスクリーンサイズ用のメディアクエリに。

@mixin mediaQuery-down($breakpoint) {
  @media ( max-width: #{map-get($breakpoints, $breakpoint)} ) {
    @content;
  }
}

で、間。
配布するわけじゃないから、引数が１つしか入ってこなかった時とか、いいや〜　ってなってます。
@include mediaQuery-down(sm, lg)で呼び出し。大きい方と小さい方、逆になってても大丈夫。

@mixin mediaQuery-between($breakpoint1, $breakpoint2) {
  $size1: null;
  $size2: null;
  @each $bp, $size in $breakpoints{
    @if ( $bp == $breakpoint1 ){
      $size1: $size;
    }
    @if ( $bp == $breakpoint2 ){
      $size2: $size;
    }
  }

  @if ( $size1 <= $size2 ) {
    @media ( min-width: #{map-get($breakpoints, $breakpoint1)} ) and ( max-width: #{map-get($breakpoints, $breakpoint2)} ) {
      @content;
    }
  } @else {
    @media ( min-width: #{map-get($breakpoints, $breakpoint2)} ) and ( max-width: #{map-get($breakpoints, $breakpoint1)} ) {
      @content;
    }
  }

}

landscapeとか、printとか、必要に応じて組み合わせてくとどんどん複雑に使い勝手がよくなりますな。