Change style inside "fold" area


#1

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.


#2

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.


#3

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.


#4

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': '/\\*'
  'beginCaptures':
    '0':
      'name': 'punctuation.definition.comment.begin.c'
  'end': '\\*/'
  'endCaptures':
    '0':
      '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.


#5

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


#6

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$).


#7

Thanks. That’s a good idea.


#8

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.


#9

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.


#10

ok thanks. i’ll try that.