CSS:sassの$mapでメディアクエリ設定を管理する。CSS:sassの$mapでメディアクエリ設定を管理する。2021-02-28HTML/CSSscssのコピペで使えるmixinレスポンシブコーディングで使い回せる、メディアクエリ管理用のmixinファイルについて。使い回してるのですが記述内容ちゃんと理解出来ていなかったので。!default;使い方:PCレイアウトからスタイルを当てていく時はmq-down、スマホレイアウトからスタイル当てていく時はmq-upで。}}ちょっと解説sassのmap関数sassのmap機能は、javascriptで配列にオブジェクトを格納するようなイメージ。変数$mapに使いたい色を設定しておく。$mapに設定した色を呼び出す。#C20038;}インターポレーション上記の例で、変数$mapの値にクォートを付けると、呼び出した値にもクォートがついてしまう。$mapに設定した色を呼び出す。}インターポレーションをつけてあげる。queryのように文字列を値として格納したい時や、selectorなどに変数を埋め込みたい時などに使える模様。インターポレーションはこちらを参考に。ありがとうございます。最後にmediaの設定。printやscreenなどは、お好みで設定。以前はscreenのみを記述していたが、レスポンシブサイトは印刷する時にスマホレイアウトで表示されてしまうので追記。個人的には、ほぼほぼmdだけ使用中。PCとSPの切り替えだけ。あとはvwや%を使って乗り越えてます。slider:自動ループで流れるようなスライダーをつくるjQuery:要素を時間差でフェードイン表示する。SVG画像:画像の一部をクリック可能にする記事一覧へトップへ。