Change style inside "fold" area


I’m fairly new to the Atom API, but since I haven’t found any plugin that does what I need, I decided to roll up my sleeves and (try) doing it myself.

The problem: When I have a large SCSS file, with different media queries, sometimes navigating in it can be difficult. Yes, bookmarks and the mini-map help a lot, but still, not perfect.

My idea: A plugin that could be configured to, through regular expressions, define the background color of the “scope”.
Eg: Let’s say

@media #{$large-up}{

and everything that was inside that scope, had a different background, so it could be easy to locate.

I don’t really know what’s the best way to approach this problem. Could I tap into the fold mechanism, and figure out which lines should I change or would that be completely wrong or not possible?

Can someone point me in the right(ish) way in the API?

Thank you.


I suspect that the easiest way would be to fork language-sass and add a rule to give a single class to the whole of a @media block, then style that as normal.


That’s not a bad approach. But would I be able to style differente @media blocks differently? Let’s say a @media block for small, and a @media block for large, with different styles.


Sure. You can make a regex identify the text inside the @media definition, since you already know what you want.

For reference, you can look at how comment blocks are defined in language-c.

  'begin': '/\\*'
      'name': 'punctuation.definition.comment.begin.c'
  'end': '\\*/'
      'name': 'punctuation.definition.comment.end.c'
  'name': 'comment.block.c'

A pattern with begin and end creates three separate sets of matches. In this case, there’s only one match per set, so there’s not much to track. The opening /* will get the classes defined in beginCaptures[0], the */ gets endCaptures[0], and everything in the middle gets name.


Hmmm, the only problem I see is to match the closing bracket, since there are so many brackets inside. In C a */ closes the comment block, but in my case a bracket doesn’t close the block, necessarily


The inside of the block is going to be indented, right? So the closing bracket can be matched with ^\} because it’s the first bracket to come at the beginning of a line. You could also add a comment after the closing bracket and match for that (something like ^\} //@media$).


Thanks. That’s a good idea.


Hey @mjbc did you ever get this to workout? I’m looking for the same solution and would love to see what you have before driving myself nuts.


I didn’t. I just mark those lines as “bookmarks” when I start the projects. (My projects all come with a sort of scaffold structure). Not the best solution, but I didn’t have the time to find a proper solution.


ok thanks. i’ll try that.