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 that in two distinct ways: a safe mode that always runs and only merges media blocks that sit next to each other in the source with an identical condition, and an optional organize mode that first tries to reorder simple breakpoints and then reruns that same adjacent-merge step. Treating these as two separate behaviors, rather than one general "merge duplicates" feature, is the right mental model before you paste anything in.

Put it into practice

Start in safe mode and watch what actually merges. Paste your CSS with the default safe mode selected, then 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 every media query in your stylesheet uses a single min-width or max-width condition in px (no combined min/max, no other units, no bare @media screen without a width), switch to organize mode; it will sort min-width queries ascending and max-width queries descending, then merge any blocks that became adjacent as a result. Read the three report messages literally: a count of adjacent queries merged, a note that simple min-width/max-width queries were reordered, and a note that complex or mixed queries kept their original order — that third message means organize mode skipped reordering for the whole batch, not just the offending block.

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. More importantly, when organize mode successfully reorders your breakpoints, any media blocks that become newly adjacent after that reorder are merged in the output, but the number shown in the report only counts adjacent merges found in your original, pre-reorder source order — so the visible count can understate what actually happened. The practical fix is simple: don't rely on the number alone, scroll through the generated SCSS and compare the @media blocks directly to confirm duplicates are gone.

Your next step

Try it with your own stylesheet in both modes before you commit to the output. Paste your real CSS into safe mode first to see the baseline merge, then switch to organize mode and compare the two results side by side. If organize mode reports "complex or mixed" and skips reordering, check whether any of your media queries combine min-width and max-width, omit a width condition, or use units other than px — converting those to a single simple px condition is what lets the whole batch qualify for reordering on your next pass. 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.