Color Highlighting for variables?

[danyeah]

Is it possible to add color highlighting for $variables

Its kind of hard to read when you have multiple variables.

[mrmartineau]

+1

[curtisj44]

It looks like variables are scoped as source.scss variable. And when a variable is used in the value of a variable (eg: $color-text: $grey) the scope is source.scss variable.scss variable.scss.

Could it be that the theme you're using doesn't include a definition for that second scope? Something like this:

<dict>
    <key>name</key>
    <string>Scss - variable</string>
    <key>scope</key>
    <string>source.scss variable</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#ff0</string> <!-- yellow -->
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>Scss - variable in value of variable</string>
    <key>scope</key>
    <string>source.scss variable.scss variable.scss</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#f00</string> <!-- red -->
    </dict>
</dict>

[sp00n]

I've noticed the same, and none of the default themes featured the variable color highlightning.
I've then added both of the entries above to the theme, but only one of them is working. They both work individually, but if both are present, source.scss variable.scss variable.scss always takes precedence, no matter in which order they're in the file.

// Edit
Correction: the two different colors actually do work, but only if they're not within an actual style definition.
So
$color: $blue;
works, but
.blue { $color: $blue; }
will be displayed in the same color (which is still better than no syntax highlighting at all).