変数とmixinを使ったメディアクエリで効率的なレスポンシブコーディング
最終更新日: Update!!
CSS拡張のメタ言語であるSassですが、様々な便利機能があり使いこなすことでコーディングが飛躍的に効率よく行うことができます。今回はその中でも「mixin」と「変数」を使ってメディアクエリを管理する方法をまとめていきたいと思います。
レシポンシブコーディングはどうしても複雑でコードが長くなりがちですが、Sassをうまく使うことでスッキリとさせることができます。管理や保守も楽になりますし、コーディングのスピードも早くなるというメリットがあります。効率的なコーディングのために参考にしてみてはいかがでしょうか。
変数でブレークポイントを定義
Sassでは値を変数として扱うことができます。メディアクエリでもディスプレイサイズをpxで指定しますが、その値を変数で定義しておきます。このようにすることで、ブレークポイントに変更があった時でも柔軟に対応することができます。 この後、紹介する例ではBootstrap4に合わせたブレークポイントになっています。この値は案件ごとの仕様に合わせていきます。変数名も適宜わかりやすい名前にしておきます。 ブレークポイント1:1200px ブレークポイント2:992px ブレークポイント3:768px ブレークポイント4:576px 【_variable.scss】$hd-min: 1200px; $desktop-max: 1199px; $desktop-min: 992px; $laptop-max: 991px; $laptop-min: 768px; $tablet-max: 767px; $tablet-min: 576px; $mobile-max: 575px;
mixinでメディアクエリーを定義
mixinとは関数のようなもので、あるセクションをひとまとめに扱うことができます。実際にはincludeとcontentという機能と合わせて使用します。mixinで定義しておくことでメディアクエリーをより簡潔に記述することができます。 【_mixin.scss】@mixin screen-hd { @media screen and (min-width: $hd-min) { @content; } } @mixin screen-desktop { @media screen and (min-width: $desktop-min) and (max-width: $desktop-max) { @content; } } @mixin screen-laptop { @media screen and (min-width: $laptop-min) and (max-width: $laptop-max) { @content; } } @mixin screen-tablet { @media screen and (min-width: $tablet-min) and (max-width: $tablet-max) { @content; } } @mixin screen-mobile { @media screen and (max-width: $mobile-max) { @content; } }これで下記のようにscssファイルにスタイルを記述していきます。mixinで定義したデバイスごとのメディアクエリーをincludeを使ってまとめていきます。コンパイルすると、メディアクエリーとしてCSS上に書き出されます。 【_sample.scss】
@include screen-mobile { // モバイル用のスタイル h1 { font-size: 18px; color: #f00; } }【sample.css】
@media screen and (max-width: 575px) { h1 { font-size: 18px; color: #f00; } }
レシポンシブコーディングはどうしても複雑でコードが長くなりがちですが、Sassをうまく使うことでスッキリとさせることができます。管理や保守も楽になりますし、コーディングのスピードも早くなるというメリットがあります。効率的なコーディングのために参考にしてみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories