【Nuxt.js】mixin実践編：Sass & mixinで簡単メディアクエリ

前置き

Sass変数とmixinを使って
レスポンシブ対応を簡単に管理していきます✨

スタイルを当てるごとに毎回
@media screen and (max-width: 480px)
などと書き足していくのは面倒ですよね？

これが@includeだけ書けばよくなります！
また、pxを変数化して共通化&変更が
とっっっても簡単になります💕

mixinについてはこちら

【Nuxt.js】Nuxt文法編：mixin

Sassの導入方法、変数の使い方はこちら

【Nuxt.js】Sassの導入方法

簡単な使い方

メディアクエリをやる前に！
まずはSassとmixinを使った簡単な例をどうぞ🙋‍♀️

引数を$変数にする

変数名(変数に設定された値)を
引数で上書きできるやり方。

ただこれならmixin使わずとも
タグ別に普通の共通cssで指定しとけば良いです🙆‍♀️

今回はSassとmixinを簡単に
理解するためだけのサンプルです💡

) file

export default {
  styleResources: {
    scss: [
      '@/assets/scss/_mixin.scss',
    ]
  },
}

export default {

styleResources: {

scss: [

'@/assets/scss/_mixin.scss',

]

}

) assets

@mixin hoge($color: pink, $fSize: 32px) {
  color: $color;
  font-size: $fSize;
}

@mixin hoge($color: pink, $fSize: 32px) {

color: $color;

font-size: $fSize;

}

) pages

デフォルトをred, 20pxでマージしています。
引数を渡さなければデフォルトが適応されます。

コンフリクトが起きた場合のマージ
 https://wp.me/pc9NHC-s6

<template>
  <div class="page">
    <p>Hello Nuxt.js!</p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    padding: 20px;
    @include hoge(red, 20px)
  }
</style>

<p>Hello Nuxt.js!</p>

</div>

</template>

export default {

}

</script>

.page {

padding: 20px;

@include hoge(red, 20px)

}

</style>

メディアクエリ

ではメディアクエリをやっていきましょう！

簡単ver

560px以下でテキストカラーが変わるだけのもの
ただこれだと、
⬆️の例にあったように
ブレークポイントを自由にいじれます。

ということで共通化は後述✍️

解説

@content
何を入れてもOKな空箱のイメージです📦
呼び出す時に自由に処理を書けます✨🎨
https://sass-lang.com/documentation/at-rules/mixin#content-blocks

) assets

@mixin sp($breakPoint: 768px) {
  @media screen and (max-width: $breakPoint) {
    @content;
  }
}

@mixin sp($breakPoint: 768px) {

@media screen and (max-width: $breakPoint) {

@content;

}

) pages

<template>
  <div class="page">
    <p class="text">テキスト</p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    > .text {
      @include sp(560px) {
        // @contentが置き換わる
        color: pink;
      }
    }
  }
</style>

</div>

</template>

export default {

}

</script>

.page {

> .text {

@include sp(560px) {

// @contentが置き換わる

color: pink;

}

</style>

ブレークポイントの共通化

共通化をしていきます！

@media screenの書き方がmin-widthだけなので
lapで指定するとlapと
それ以上のtabにも共通になります💡

以下でまとめたい場合は
min-widthではなくmax-widthを指定すればOK🙆‍♀️

細かく分ける時はmax-widthとmin-widthの
どちらも併用し、組み合わせて使いましょう…！

) assets

$tab: 768px;
$lap: 1024px;
$pc: 1200px;

@mixin tab {
  @media screen and (min-width: ($tab)) {
    @content;
  }
}

@mixin lap {
  @media screen and (min-width: ($lap)) {
    @content;
  }
}

@mixin pc {
  @media screen and (min-width: ($pc)) {
    @content;
  }
}

$tab: 768px;

$lap: 1024px;

$pc: 1200px;

@mixin tab {

@media screen and (min-width: ($tab)) {

@content;

}

@mixin lap {

@media screen and (min-width: ($lap)) {

@content;

}

@mixin pc {

@media screen and (min-width: ($pc)) {

@content;

}

) pages

<template>
  <div class="page">
    <p class="text">テキスト</p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    > .text {
      @include lap {
        color: blue;
      }
    }
  }
</style>

</div>

</template>

export default {

}

</script>

.page {

> .text {

@include lap {

color: blue;

}

</style>

まとめ

$変数で定義が可能
$変数は引数で使える
@includeでmixinを呼び出し