Note: You may need to reload VSCode after installing this extension for it to take effect.

All modern browsers support CSS nesting (Can I Use), but Visual Studio Code doesn't currently have CSS nesting syntax highlighting. This extension rectifies that by updating the CSS syntax highlighting to include nesting.

To learn more about CSS Nesting, see MDN.

The core CSS syntax file this extension updates can be found in the official vscode repo.

.example {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

/* The browser parses this as: */
.example {
  text-decoration: none;
}
.example:hover {
  text-decoration: underline;
}

Search for CSS Nesting Syntax Highlighting in the VSCode's Extensions Marketplace panel or click the install button on the CSS Nesting Syntax Highlighting Marketplace page.

You can also manually install the extension by cloning the github repository into ~/.vscode/extensions and restarting the VSCode editor.

CSS Nesting Syntax Highlighting works excellent with the Cassidy Dark Theme.

View the Changelog.

• When nested, a few obscure #tag-names are overridden by the same #property-names. Those names are:
  • HTML tags: content, font, image, marquee, mask, shadow, style.
  • SVG tags: color-profile, cursor, filter, line, text.
• Nesting syntax highlighting for at rules, except for @media, has not been added.

If you come across any issues, please feel free to report them here. You can also create a pull request to add any improvements.