SCSSでメディアクエリを効率的に管理しよう

よろしければシェアお願いいたします

こんにちは(‘ω’)

この記事を書いている最中に、キーボードのスキマに猫砂が詰まって
F5が押され続ける現象に涙した猫村です。

ポートフォリオ作成のついでに、メディアクエリを一括管理するソースを書いたので共有がてら残しておきます。

そもそもSCSS書ける環境がないよって方はgulp-sassを導入してSassのコンパイルを自動化するをご覧ください。

ソースの共有

はい、ソースの共有です。

メディアクエリを使用したいscssで@importして

こんな感じに使用します。

はきだされたCSSを見てみると・・

わあ素敵!!

一括管理することで、「あれ!?ここのwidth、他のところと値が違うぞ・・」っていう悲しいことが防げるのでとっても便利になります。
(cssにベタ書きしてる案件で結構見る)

また要素ごとにメディアクエリを書いたほうが、
「SPの記述は~・・あったあった」みたいにわざわざ検索しなくてもよくなるので管理が楽です。
ただし、これだとcssにコンパイルした時に色々なところに
メディアクエリの記述が出てきてしまうという残念なことになります。

gulpにはバラバラになったメディアクエリをまとめてくれるプラグインがあるようなので、別記事でご紹介します。

スポンサーリンク
広告1
広告1

よろしければシェアお願いいたします

フォローする

スポンサーリンク
広告1