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

4875 ワード
Vue.js コンポーネント JavaScript nuxt.js JavaScript テキストリンク

🎈 この記事はWP専用です
https://wp.me/pc9NHC-sl

前置き

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

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

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

mixinについてはこちら
https://wp.me/pc9NHC-s6

Sassの導入方法、変数の使い方はこちら
https://wp.me/pc9NHC-sc

簡単な使い方

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

引数を$変数にする

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

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

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

nuxt.config.js
export default {
 styleResources: {
   scss: [
     '@/assets/scss/_mixin.scss',
   ]
 },
}
mixin.scss
@mixin hoge($color: pink, $fSize: 32px) {
 color: $color;
 font-size: $fSize;
}

【index.vue】

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

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

index.vue
<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>

メディアクエリ

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-sl