SCSS Class Finder

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

1. Open the SCSS Class Finder view from the Activity Bar (the magnifier icon).

2. 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.

3. 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

4. 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).

5. Click the … button to reveal files to include / files to exclude globs.

6. 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

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.

Feedback

Found a bug or have a feature request? Please open an issue:

• 🐛 Report an issue / request a feature

Your feedback helps make this extension better.

Support the Developer

If this extension saves you time, please consider supporting its development — it keeps the updates coming and is hugely appreciated.

• ❤️ Support the developer

You can also use the Sponsor button at the top of this extension's page in VS Code.