アプリ サイト

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

前置き

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

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

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

mixinについてはこちら

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


簡単な使い方

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

引数を$変数にする

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

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

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

) file

) assets

) pages

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

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


メディアクエリ

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

簡単ver

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

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

解説

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

) assets

) pages


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

共通化をしていきます!

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

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

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

) assets

) pages

まとめ

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

-アプリ, サイト
-,

© 2020 aLiz Nuxt