Find all matching CSS classes inside your SCSS / SASS files and browse the results in a search-style tree view — just like the built‑in VS Code Search panel.

Features

🔍 Inline search bar in its own side‑panel view — search-as-you-type with results grouped by file, match counts, line:column, and highlighted matches, just like the built‑in VS Code Search panel.
🎛️ Filter toggles — whole class name vs. contains and resolve BEM in the search box; match case, skip comments, and include pseudo selectors in the row below — plus expandable files to include / exclude glob inputs.
🔎 Search one or many class names at once (comma or space separated, leading . optional).
🧩 BEM / &-nesting aware: finds assembled class names like draggable-item-with-text__icon--hexagon even though they are built across nested &__icon { &--hexagon { … } } rules and never written literally.
🎯 Filter by CSS properties: paste a rule with declarations, e.g. --square { border-radius: 0.25rem; }, to keep only the matching classes whose rule actually declares those properties (values match as a substring, so 0.25 finds 0.25rem; multiple declarations must all be present).
🌳 Results are grouped by file with per-file match counts, and each match shows the line number and the matched token highlighted — exactly like VS Code search results.
↪️ Click any result to jump straight to that line with the match selected.
🧠 Smart matching: btn will not match inside .btn-primary (word-aware).
💬 Optionally skips matches inside // line comments and /* block */ comments.
⚙️ Configurable include/exclude globs and match strictness.
🖱️ Right‑click a selected class name in any file → Find Selected CSS Class in SCSS.

Usage

Open the SCSS Class Finder view from the Activity Bar (the magnifier icon).
Type the class name(s) directly in the search box — results update as you type, grouped by file just like the built-in Search panel.
Use the toggles to refine matching. Two live in the search box:
- ab — match whole class name (turn off to match classes that contain the text, e.g. icon then also matches .block__icon--square)
- & — resolve & (BEM) nesting
The rest sit in the row just below the search box:
- Aa — match case
- // — skip matches inside comments
- :: — include pseudo selectors (&::before, &:hover, …) as match locations
To filter by CSS properties, include a rule body in the query, e.g. --square { border-radius: 0.25rem; }. Only classes matching the selector and declaring every listed property are kept (values match as a substring; pasting a multi‑line rule works too).
Click the … button to reveal files to include / files to exclude globs.
Click any result to jump to that line with the match selected.

You can also select a class name in any file, right‑click → Find Selected CSS Class in SCSS.

Try it on the included sample/styles.scss by searching for button, card, nav-item, or the assembled draggable-item-with-text__icon--hexagon.

Settings

Setting	Default	Description
`scssClassFinder.include`	`*/.{scss,sass}`	Default glob of files to search (overridable via the panel's files to include).
`scssClassFinder.exclude`	`/{node_modules,…}/`	Default glob to exclude (overridable via the panel's files to exclude).
`scssClassFinder.skipComments`	`true`	Default for the // (skip comments) toggle.

The match-case and BEM-resolution toggles live directly in the search panel.

Develop

npm install
npm run compile      # or: npm run watch

Press F5 in VS Code to launch an Extension Development Host with the extension loaded.

Notes

The matcher combines a word-aware text scan with an SCSS-aware resolver:

Literal .className tokens are matched directly (word-aware, comment-aware).
Assembled selectors built from parent references — &__element, &--modifier, &-suffix — are resolved through the nesting stack so their full compiled class name (e.g. .block__element--modifier) is searchable. These results are marked with a constructor icon in the tree.

Dynamic class names produced by #{$interpolation} cannot be resolved and are skipped.