Search code examples
csscoding-stylestylesmedia-queries

How do I extract all the media queries in a CSS stylesheet file easily?

currently i have a very large css file with over 2000 lines of code. now in this file its littered with media queries all over the place. Basically its very sloppy coding organization.

I want to be able to extract all these media queries in this file into its own responsive.css stylesheet so i can conditionally turn these queries off when needed.

Now the question is what is the fastest way of doing this? Is there a program or script that can automate this tedious task as right now im doing it by hand.

Solution

  • If you have Sublime Text or Visual Studio Code (or any other IDE with regex search support and a Find All option) it's very simple:

    1. CMD+F to find
    2. Match all the @media queries with the regex:

    @media[^{]*\{(?:(?!\}\s*\}).)*}}

    1. Click "Find All"
    2. CMD+C to copy
    3. Open up a blank document and paste them in CMD+V

    Super quick and easy.