StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編）

sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作るか紹介します。

Stylusの環境構築方法はこちらの記事

実際に追加するコード

mq(num)
  breakpoints = {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  }

  for key, val in breakpoints
    if (num == key)
      num = val

  @media only screen and (min-width unit(num, px))
    {block}

• breakpointsの値はTwitterBootstrapと同じにしていますがプロジェクト別に設定しても問題ありません。
• モバイルファーストで設定しています。
• breakpointsの他にmq(num)のnumに数字を設定すればその値はメディアクエリの切り替えポイントになります。

使い方

実際には引数に数字か文字列を入力します

.hoge
  mq(sm)
    background-color: gold

これでメディアクエリの設定が楽になりました。