I am trying to select the content of @media in CSS with regexp in Emacs (elisp) to make a slight change in the color of the background or font, so I can easily see that I am editing inside of them.
I already came up with this regexp:
@media.*\{\\(.*[^]]*?\}\\)[ \t\n]*\}
And this is selecting the content most of the times, but I'm having a problem when I have comments or leading spaces after the last bracket before the closing bracket of the @media statement.
I want to match just the content inside every @media query brackets.
/*... css above*/
/*tablet*/
@media (max-width: 800px){
._desktop-only {display:none !important;}
._tablet-only {display:initial;}
._mobile-only {display:none;}
}
/*mobile*/
@media (max-width: 480px){
._desktop-only {display:none;}
._tablet-only {display:none !important;}
._mobile-only {display:initial;} /* comment */
}
/*more css below...*/
Some people might suggest that I should create separated files. I usually do that, but sometimes I have to edit the files as they are. And don't mind much the sample, because my goal is to edit large CSS files with a lot of statements inside of them, and I want to be able to see if I am editing the main statements or the variation of them.