Question

I’m currently using LESS to ‘bubble’ my media queries. So my outputted CSS is something like this –

header {
  color: red;
}
@media only screen and (min-width: 768px) {
  header {
    color: green;
  }
}
@media only screen and (min-width: 1024px) {
  header {
    color: blue;
  }
}

section {
  color: green;
}
@media only screen and (min-width: 768px) {
  section {
    color: blue;
  }
}
@media only screen and (min-width: 1024px) {
  section {
     color: red;
  }
}

As you can see there’s a separate rule declaration for each element (header/section/whatever) for each media query being used.

Can I use jQuery to go through a CSS file and ‘collate’ all similar @media rules (whatever they are) and have an output (appendto?) bit of html to copy and paste?

EDIT:
If I created an ‘app’ could I copy and paste the raw CSS and get jQuery to find/replace/collate the media queries so all the same ones are together?

EDIT:
To hopefully stop any confusion I want to create an app that takes a RAW copy and pasted bit of text (that’ll be CSS) which would then compile and merge the correct @media rules together. Which you could then paste back into your code editor. Not actually ‘touching’ a CSS file

Answer 1

You can merge all similar CSS, and you need to write media query size format in descending order like this

header {
 color: red;
}
section {
   color: green;
}
@media only screen and (min-width: 1024px) {
   header {
    color: blue;
   }
   section {
    color: red;
  }
}
@media only screen and (min-width: 768px) {
   section {
    color: blue;
   }
   header {
    color: green;
   }
}

For reference check this

http://stackcomplete.com/media-queries-for-adaptive-to-responsive-websites/