【Stylus】でメディアクエリを出し分けする便利なMixin

スタイルの編集を行うとき、みなさんは何を使用していますでしょうか？

私はStylusを使用しております。

使用率でいうとSass/Scssが多いかと思いますが、Stylusは最も記述が少なくすみ、

また、Sass等で使用していたソースをそのまま使ってもStylus側で認識されるという利便性があります。

要は乗り換えてもSass/Scss表記は可能ですし、直書きでcss表記ももちろん可能です。

また、ネット上にあるcssのソースをそのまま使用したいといったときでもコピペですぐに使用できます。

そういった魅力もあり、私はStylusを使用しております。

今現代のサイトはほとんどレスポンシブに対応（パソコンとスマホで最適な表示にさせる）していますよね。

そこで必要なのがスタイルシートでメディアクエリ表記でのパソコンサイト（PC）とスマホサイト（SP）の出し分けです。（以下PC/SP）

通常のCSSですと、こんな感じの表記になると思います。

@media screen and (max-width:767px){
  /* SPの記述 (画面幅767以下に適応) */
}

@media screen and (min-width:768px){
  /* PCの記述（画面幅768以上に適応）*/
}

これをStylusで書いてみます。

@media screen and (max-width 767px)
  // SPの記述 (画面幅767以下に適応)

@media screen and (min-width 768px)
  // PCの記述（画面幅768以上に適応）

波括弧やコロンがが無くなったのがわかりますね。

これはSass表記でも同様かと思います。

さらに使いやすくするためにMixin化します。

pc()
  @media screen and (min-width 768px)
    {block}

sp()
  @media screen and (max-width 767px)
    {block}

さらに$MediaSPという変数を用意して可変する時のSPでの幅を代入します。

そしてMixinを再度変更します。

$MediaSP = 767

pc()
  @media screen and (min-width unit($MediaSP + 1 , "px"))
    {block}

sp()
  @media screen and (max-width unit($MediaSP , "px"))
    {block}

こうすることによって変数の値を持ってきてメディアクエリに代入されるようになります。

PC/SPの境目を指定するときに変数の数値のみをいじれば住むようになるわけですね！

ちなみにしれっと unit というStylus独自の関数を使用しておりますが、こちらは第一引数に数値、第二引数にpxなどの付属する文字列を入れることによって合わせてくれるといった関数です。

ですので下記の

unit($MediaSP , "px")

は

unit(767 , "px")

↓

767px

となります。

Mixinの使用方法ですが、たとえばPCでは折り返さないで高さ中央合わせだけどSPでは幅に応じて折り返したいといった例だとすると以下のように呼び出して使用します。

.content
  display flex
  +pc()
    align-items center
  +sp()
    flex-wrap wrap

とても簡潔に書くことができますね！

Mixinは用意すればとても便利で余計な記述がでませんので是非つかってみてください。