BEM nesting SCSS with parent selectors breaks Sublime Text syntax highlighting?

Question

I'm experimenting with BEM syntax on a project that uses SCSS. My editor is Sublime Text 3 and I'm using SCSS syntax highlighting.

The problem I'm experiencing is that when I nest using the & parent selector as per this article by Mike Fowler, Sublime highlights it red. Here is an example:

The code compiles fine, I'd just prefer that Sublime not flag these as errors.

Can anyone help config Sublime to do just that?

Answer 1

I suggest using the Syntax Highlighting for Sass package for syntax highlighting. Using it and the Neon Color Scheme, which fully supports all the scopes in the Syntax Highlighting for Sass package (disclaimer: I'm the theme's maintainer), your code looks like this:

with no errors (green is a class name, and & is recognized as a special SASS/SCSS symbol). I'm not sure what package you're currently using for SCSS highlighting, but it obviously doesn't recognize the leading -- characters, or anything following leading __ characters, as valid. Switching over to the new syntax highlighting package should help.