今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。 今回の完成形 今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。 .test-1 { margin-top: 16px; font-size: 16px; } @media screen and (min-width: 600px) { .test-1 { margin-top: 24px; font-size: 18px; } } @media screen and (min-width: 960px) { .test-1 { margin-top: 32px; font-size: 20px; } } .test-2
![初心者でも分かるscssのメディアクエリをまとめる「mqpacker」の使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/a5fc7d7fda5097b44fdf43af998fe453b132144f/height=288;version=1;width=512/https%3A%2F%2Fasalworld.com%2Fwp-content%2Fuploads%2F2020%2F03%2Fgulp.png)