Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>SCSS Language ImprovementsNew to Visual Studio Code? Get it now.
SCSS Language Improvements

SCSS Language Improvements

Roni Laukkarinen

|
399 installs
| (0) | Free
Fixing some of the shortfalls of the SCSS Language Basics
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

SCSS Language Improvements

VSCode Marketplace GitHub release

Fix the missing colors in CSS/SCSS attributes

This extension attempts to fix the SCSS related syntax highlighting issue as described here. The original extension is no longer found in VSCode market because we thought the issue has been fixed. Because the original maintainer is not doing SCSS daily any longer, I'm keeping this project alive while waiting for the issue to be fixed (I'm not holding my breath as the previous fix took years).

Usage

  1. Install the extension from Visual Studio Marketplace
  2. Add the following to your settings.json:
"editor.tokenColorCustomizations": {
  "textMateRules": [
    {        
      "scope": "meta.property-name-custom-unique.scss",
      "settings": {
        "foreground": "#66d9ef",
      }
    },
  ]
},

Use the color from your color theme. This ensures the missing colors are always correct. This example is in line with my vscode-settings.

The issue

Have you ever noticed that some properties in your SCSS files are oddly-colored by your syntax highlighter?

screely-1652946897665

This small extension solves that issue.

Why does this happen in the first place?

The words content, cursor, filter, font,and mask are all words that have been identified as selectors and property names.

Why isn't this in the real language pack?

VSCode takes its SASS language definition directionly from the Atom language definition. There is an issue here about the matter.

How does it work?

This code change targets specifically those problematic words. This plugin first considers them property names by default, but once they're followed by a curly brace, pseudo-element or pseudo-selector, they resolve to selectors.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft