10

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:

enter image description here

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

Can anyone help config Sublime to do just that?

MattDMo
  • 100,794
  • 21
  • 241
  • 231
fourhexagons
  • 103
  • 1
  • 4

2 Answers2

20

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:

SHfS and Neon

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.

MattDMo
  • 100,794
  • 21
  • 241
  • 231
  • 1
    The Syntax Highlighting for Sass package was the answer I needed. I had been using the SCSS package, which didn't match the `&-someRule` selector syntax. The SCSS package has better autocomplete for hyphenated rules (e.g. `background-color`), so I'm using the two packages in tandem now. – chrislopresto Mar 01 '16 at 15:00
3

I fixed this when I had this issue by selecting View>Syntax>SASS>SCSS This is apparently caused by downloading the original SASS package Sublime.

Richard Clifford
  • 494
  • 3
  • 17