Stylusでメディアクエリ用のmixinを作っておき使いまわす

最近のサイト制作で一番記述量が多いのはCSSです。cssでできることが増えてきていることも関係しています。

何年も前からcssも生のcssは書かずscssなどのより管理しやすく記述量を短縮できるプリプロセッサを使用した作り方に変わりました。

以前はscssで書いていましたがstylusというプリプロセッサが気にいったのでこちらを使用しています。

Stylusとは何か

NODE製のプリプロセッサです。もしくはSASSのNODE版ともいえます。

CSS記法、SCSS記法、SASS記法で混在で書いても怒られないおおらかな後発ツールの良さがあります。

また独自記法だと「{}」も「:;」もいらなくなるため文字入力数を大幅に減らすことができます。

このstylusのmixin機能をつかってメディアクエリ記述を簡単にするmixinを作ります。

メディアクエリ用mixinをつくろう

stylusの使いかたは別の記事に書くとしてメディアクエリ用のmixinは次のように設定します

mq(num)
    // ここの値はお好みで
  // 今回はTwitterBootstrapのbreakpointsに合わせて…。
    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}


// @USAGE 使い方
+mq(sm)
    background-color pink

これでメディアクエリの記述をだいぶ省略することができるようになりました。