メディアクエリをmixinで管理する

レスポンシブデザインのサイトを作成する上で、メディアクエリは欠かせないものになります。
しかし、毎回@media screen and (min-width: ○○px)のような記述を行うのはとても面倒です。
そこで、これらをmixinにすることで、記述を簡単にすることができます。

作成したmixin

用意したのは下記のパターンです。

// PCレイアウト
@mixin large {
  @media screen and (min-width: 960px) {
    @content;
  }
}

// 中間レイアウト以上
@mixin more_than_medium {
  @media screen and (min-width: 481px) {
    @content;
  }
}

// 中間レイアウト
@mixin medium {
  @media screen and (max-width: 959px) and (min-width: 481px) {
    @content;
  }
}

// 中間レイアウト以下
@mixin less_than_medium {
  @media screen and (max-width: 959px) {
    @content;
  }
}

// スマホレイアウト
@mixin small {
  @media screen and (max-width: 480px) {
    @content;
  }
}

補足

• サイトによって必要なサイズを追加したり、削除したりして使用してください
• 今回はscreenを指定していますが、こちらも必要に応じて修正してください
• 何も気にしないでいいということであれば、allを指定する形でよいかと思います
• 他にも指定できるものがありますが、こちらに関してはここでは解説しませんので、必要に応じて追加していただければと思います
• 本来であれば、ブレークポイントの数値は変数化して管理しますが、ここでは直接していしています

使用例

あまり意味ないかもしれませんが、使用例は下記の通りになります。

.test {
  @include small {
    font-size: 16px;
  }
  @include more_than_medium {
    font-size: 20px;
  }
}

最小のレイアウトをベースにして上書きしていくパターンで実装するのであれば、smallは不要でそのままサイズを指定すればいいですが、使用イメージはこんな形です。

まとめ

以上がメディアクエリをmixinで管理する方法になります。
個人的には@contentがとても好きです。
これをつけておけば、引数で渡しきれないプロパティを指定して渡すことができるので、とても自由度が増す印象を持っています。
これがあることによって、mixinの可能性が広がっている気がします。