【Nuxt.js】StylusでBreakpointを効率良く書こう

従来のレスポンシブ対応にはcssにmedia queryを使用しますが、stylusでmixinを使用し記述を簡素化して書くことができます。
以下にその手順を紹介します。

まずデザインテンプレートにVuetifyを導入しているのでこちらを参考に設定をしていきます。
(こちらはお使いのフレームワークやご利用のBreakpointに合わせてください。)
https://vuetifyjs.com/en/customization/breakpoints

従来のCSS

@media screen and (max-width: 600px) {
  color: red;
}

Stylusでの書き方

Stylusでもほぼ変わらずタグを省略するぐらいしか違いがないです。

@media screen and (max-width: 600px) {
  color red
}

block mixinの使用

Stylusでは+接頭辞を付けてmixinを呼び出しのブロックに渡すことができます。
Sass では必要だった @mixin や @include の表記が不要です。

hover() {
  &:hover, &:active {
    {block}
  }
}
+hover() {
  text-decoration: underline;
}

これらを応用してmedia queryを作成していきます。

変数をセットする

まずは変数用のstylusファイルを作成し、Vuetifyのbreakpointの数字をいれていきます。

_variables.styl

small = 600px
midium = 960px
large = 1264px
xlarge = 1904px

mixinsにセットする

次にmixin用のファイルを用意し記入していく。

breakpoint-sm()
  @media screen and (min-width: small)
    {block}
breakpoint-md()
  @media screen and (min-width: midium)
    {block}
breakpoint-lg()
  @media screen and (min-width: large)
    {block}
breakpoint-xl()
  @media screen and (min-width: xlarge)
    {block}

さらに改良する

breakpoint(breakpointNames)
  for name in breakpointNames
    if name == 'xm'
      {block}
    if name == 'sm'
      @media only screen and (min-width: small)
        {block}
    if name == 'md'
      @media only screen and (min-width: midium)
        {block}
    if name == 'lg'
      @media only screen and (min-width: large)
        {block}
    if name == 'xl'
      @media only screen and (min-width: xlarge)
        {block}

使用するstyleに書いていく

それぞれの幅に合わしたものに書いていきます。

style.styl

.contents
  padding 0px
  +breakpoint(xl)
    padding 10px
  +breakpoint(sm)
    padding 20px
  +breakpoint(md)
    padding 30px
  +breakpoint(lg)
    padding 40px
  +breakpoint(xl)
    padding 40px

コンパイル

コンパイルされるとこのような結果になります。

style.css

.contents {
  padding: 0px;
}
@media only screen and (min-width: 600px) {
  .box {
    padding: 10px;
  }
}
@media only screen and (min-width: 960px) {
  .box {
    padding: 20px;
  }
}
@media only screen and (min-width: 1264px) {
  .box {
    padding: 30px;
  }
}
@media only screen and (min-width: 1904px) {
  .box {
    padding: 40px;
  }
}