MediaQueriesを横着して書く方法@Sass

Sassのmixin機能を利用して、冗長なメディアクエリを簡単に書きます。

まずブレイクポイントは変数にします

BootStrapの設定を参考に、４デバイスを想定しました。
実のところ**PCかスマホだけで十分！**という場合も少なくないですが、せっかくなので４つとも使います。損はないです。

//== Screen Size
$screen-xs: 480px !default; //Extra small screen(xs)->smartphone
$screen-sm: 768px !default; //Small screen(sm) ->tablet
$screen-md: 992px !default; //Medium screen(md) ->desktop
$screen-lg: 1200px !default; //Large screen(lg） ->wide desktop

Mixinを定義します

@contentディレクティブでコンテントブロックを渡していきます。
デバイス略称(lg|md|sm|xs)を引数として、mq()というmixinを定義してます。

下２つ（pc/sp）は横着の結果生まれました。
モバイルファースト(sp)で作った後、申し訳程度のPC対応するときに重宝しました。悪手なんでしょうけど、暫定処置としてよく使ってます。
可読性のため端折ってますが、実務に組み込む場合は変数をMixin用に置き換えて管理したり、もう少しちゃんと作った方が良いです。

@mixin mq($DEVICE) {
    // Large screen / wide desktop
    @if $DEVICE == "lg" {
        @media (min-width: $screen-lg) {
            @content;
        }
    }
    // Medium screen / desktop
    @else if $DEVICE == "md" {
        @media (min-width: $screen-md) and (max-width: ($screen-lg - 1)) {
            @content;
        }
    }
    // Small screen / tablet
    @else if $DEVICE == "sm" {
        @media (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
            @content;
        }
    }
    // Extra small screen / smartphone
    @else if $DEVICE == "xs" {
        @media (max-width: ($screen-sm - 1)) {
            @content;
        }
    }
    // ★PC★ (md & lg)
    @else if $DEVICE == "pc" {
        @media (min-width: $screen-md) {
            @content;
        }
    }
    // ★SP★ (xs & sm)
    @else if $DEVICE == "sp" {
        @media (max-width: ($screen-md - 1)) {
            @content;
        }
    }
}

実際書いてみる

メディアクエリの管理方法は様々ですが、ルールセットの中に書いてしまうのが手軽で良いです。スコープもわかりやすいし。
別々にしちゃうとどうも忘れるというか、そもそも別ける手間がめんどくさくてつらい。

.banner {
  margin: 0;
  @include mq(lg) {
    width: 512px;
  }
  @include mq(md) {
    width: 256px;
  }
  @include mq(sm) {
    width: 128px;
  }
  @include mq(xs) {
    width: 64px;
  }
}

と書くと、以下のようにうまいこと展開してくれます。

.banner {
  margin: 0;
}
@media (min-width: 1200px) {
  .banner {
    width: 512px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .banner {
    width: 256px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .banner {
    width: 128px;
  }
}
@media (max-width: 767px) {
  .banner {
    width: 64px;
  }
}

大事なこと

頑張ってまとめるように書いてもとっ散らかるのがお約束でが、CSS MQPackerという神プラグインが自動でひとまとめにしてくれます。