Why doesn't sublime automatically detect this

Question

I have the following saved to node-sass.sublime-build in my User folder

{
    "shell_cmd": "node-sass.cmd $file",
    "selector": "source.scss"
}

I have a slideEditor.scss file. If I explicitly set the build system to node-sass, ctrl+b works just fine, but if I set it to "Automatic", ctrl+b does nothing with nothing being logged to the console. What can be going on? According the limited documentation I'm doing everything correct.

Answer 1

First, the short answer to your question: change "source.scss" to "source.sass" and the Automatic build system should work fine.

The background, and some alternatives:

Syntax highlighting in Sublime (and TextMate, where the idea originally came from) is based on .tmLanguage syntax definitions for each language. These XML/Plist files are basically a series of regexes that assign their matches to scopes. For example, in the following CSS:

body {
    margin: 0;
}

the word body has the scope source.css meta.selector.css entity.name.tag.css. source.css is the base scope, or the parent for all other scopes. In a Python file, the base scope would be source.python, in HTML it's text.html.basic, Javascript is source.javascript, etc. This base scope is what the "selector" is looking for - it has nothing to do with the file name.

The syntax definition you're using has a base scope of source.sass, which is why your build system wasn't working unless you specifically selected it (which overrides the selector attribute). There are two ways around this. The first, as I mentioned above, is to simply change the selector to source.sass, and you'll be all set. The second, which I prefer, is to use the Syntax Highlighting for Sass package, available from Package Control. For one thing, it has separate language definitions for SASS and SCSS, so you can get proper highlighting for both. The base scope for SCSS is source.scss, as you'd expect, while for SASS it's source.sass, so you can have separate build systems if you're using both languages. Additionally, the syntax definition is much richer than the package you're using, so if you're using one of the recommended color schemes you'll get very nice highlighting of all the various elements, keywords, properties, etc. Finally, the package includes a bunch of completions and other extras that make writing stylesheets much easier.