How to merge duplicate media queries when converting CSS to SCSS

Start with the essential

CSS forces you to repeat the same breakpoint condition every time you use it, because native CSS cannot nest a media query inside a selector the way SCSS can. That repetition is exactly why the same @media (min-width: 768px) block often shows up many times in one stylesheet, and why merging it becomes worth doing before you move to SCSS. This converter handles it in one deliberately narrow way: it merges media blocks only when they sit next to each other in the source and their condition text is identical. It never reorders media queries to bring duplicates together, because moving a breakpoint block can change which declaration wins. Keeping that narrow rule in mind is the right mental model before you paste anything in.

Put it into practice

Paste your CSS and watch what actually merges. Look at which @media blocks combined — only pairs that were already next to each other with the exact same condition text will merge, so scattered duplicates elsewhere in the file are left alone on purpose. If you want two distant blocks to merge, move them next to each other in your source first, and only after you have confirmed that the move does not change the cascade. The report then tells you how many adjacent media query blocks were merged.

A detail worth checking

The report's merge count is worth double-checking rather than trusting outright. Merging only fires on an exact string match, so (min-width: 768px) and (min-width:768px) are treated as different conditions and will not combine even though they mean the same thing — normalize spacing in your source first if you want them to merge. Merging also simply joins the block bodies; it does not remove a property that ends up declared twice. Scroll through the generated SCSS and compare the @media blocks directly to confirm the result is what you expected.

Your next step

Try it with your own stylesheet before you commit to the output. Run your real CSS once as it is to see the baseline merge, then normalize the spacing in your media conditions and run it again to see whether more blocks combine. Once your breakpoints are consistent, open the CSS to SCSS Converter and run the conversion on your actual file to see the merged, nested SCSS output for yourself.

Use this as a small, repeatable check rather than a one-time task.