Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

今まで 〜どんどん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;
  }
}

で、間。
配布するわけじゃないから、引数が1つしか入ってこなかった時とか、いいや〜 ってなってます。
@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とか、必要に応じて組み合わせてくとどんどん複雑に使い勝手がよくなりますな。

niever66
またちょっと根無し草に逆戻りです
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away