Nifty SCSS IntelliSense

Variables, mixins, functions and placeholders from all your SCSS files: completion that understands @use namespaces and @import, hover with values and SassDoc, and go to definition.

Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.

Features

Completing design tokens through a @use namespace: ds.$sp offers the spacing variables with their values

@include ds. offers only the mixins forwarded by the design system, with parameters and SassDoc

Hovering a namespaced token shows its value, its SassDoc comment and the partial it comes from

Completion across files. Type $, @include or @extend % to get the variables, mixins and placeholders your file can use, from the file itself and everything it @imports. Suggestions show values and parameters.
Understands Sass modules. @use "tokens" as t gives you t.$primary, @include t.rounded() and t.double(), following @forward chains and _index.scss files. Private members ($-name) stay private. Built-in modules work too: math.div, color.adjust, map.get and the rest, with their parameters.
Hover over a variable to see its value and SassDoc (///) comments, or over a mixin or function to see its signature.
Go to Definition for variables, mixins, functions and placeholders, including namespaced ones. @use, @forward and @import paths are links.
Finds modules like Sass does. Partials (_name.scss), index files, relative paths, node_modules and ~package paths, and your own load paths.
Old projects too. Projects that rely on global @imports still get variables and mixins from every SCSS file in the workspace, after the ones in scope and labelled with their file.
Works in the browser on vscode.dev and github.dev.

Settings

Setting	Default	What it does
`nifty.scss.loadPaths`	`["node_modules"]`	Folders where `@use` and `@import` look for modules (the workspace root is always included)
`nifty.scss.suggestFromWorkspace`	`true`	Also suggest symbols from every SCSS file in the workspace
`nifty.scss.exclude`	build and dependency folders	Files left out of workspace-wide suggestions
`nifty.scss.maxFiles`	`3000`	Most SCSS files to read

Install

VS Code: search for "Nifty SCSS IntelliSense" in the Extensions view, or install from the Visual Studio Marketplace.
Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.

Privacy

This extension collects no telemetry and needs no account.

More Nifty tools

Nifty CSS Classes: Class Name Completion: Complete CSS class names in HTML, JSX, Vue, Svelte, PHP and templates from your stylesheets, including SCSS nesting and linked files, with hover and go to definition. (Open VSX)
Nifty CSS Variables: Custom Property IntelliSense: IntelliSense for CSS custom properties across your project: complete var(--…), see resolved values and colour swatches, go to definitions, catch undefined variables, and browse a colour palette. (Open VSX)
Nifty C# Scratchpad: Run C# Snippets & NuGet: Run C# snippets instantly with NuGet packages and rich Dump() output, a LINQPad-style scratchpad and Polyglot Notebooks replacement. (Open VSX)
Nifty C# Templates: New Class, Record & Namespace: New C# class, interface, record, enum, test and controller files with the right namespace, plus namespace syncing. (Open VSX)
Nifty Code Runner: Run Code in 25+ Languages: Run the current file or selection in 25+ languages in the terminal, with input support, your own commands and no telemetry. (Open VSX)
Nifty Colors: Swatches & Picker in Every Language: Colour swatches and VS Code's picker in any file: CSS, Tailwind, Flutter, Swift, Android, C# and Unity colours. Convert formats and check WCAG contrast on hover. (Open VSX)

See all 100+ Nifty extensions and web tools at https://getnifty.dev

Nifty SCSS IntelliSense: Variables & Mixins