SCSS @layer Highlight

Highlights CSS Cascade Layers (@layer) in SCSS (and CSS) and adds a small hover tooltip with quick docs and examples.

Features

• Highlights @layer as an at-rule keyword (theme-native).
• Highlights layer names after @layer (theme-native), including:
  • Single name: @layer utilities;
  • Multiple names: @layer theme, layout, utilities;
  • Dotted names: @layer utilities.buttons;
• Hover tooltip on @layer / layer names with a short explanation + examples + MDN link.

Examples

@layer theme, layout, utilities;

@layer utilities.buttons {
  .btn { /* ... */ }
}

Troubleshooting

It doesn’t highlight in my SCSS files

Your SCSS grammar root scope may differ.

1. Open an .scss file
2. Run: Developer: Inspect Editor Tokens and Scopes
3. Click somewhere in the file
4. Check the top-most scope (often source.css.scss, sometimes source.scss)

If your root scope is source.scss, you may need to switch the injection target in package.json and injectionSelector in the grammar to source.scss.

Development

npm i
# package a local VSIX
npx vsce package

To run locally for development, open this project in VS Code and start the extension host:

Run: Run → Start Debugging (or press F5)

License

MIT

Made with ❤ by Poliklot