SCSS IntelliSense — Autocomplete, Design Tokens Explorer & @use Support

The missing IntelliSense for modern Sass — plus a visual Design Tokens sidebar. Full autocomplete for @use imports with namespace support, a live color palette and CSS @property explorer, path aliases, signature hints, and embedded <style lang="scss"> in Vue, Svelte, Astro & HTML.

Why This Extension?

The Sass module system (@use / @forward) is the modern way to structure stylesheets — but VS Code gives you zero IntelliSense for it out of the box. No autocomplete after fn., no parameter hints, no Go to Definition across files. And there's no way to browse all your design tokens — colors, variables, mixins — in one place.

This extension fixes all of that.

Features

Design Tokens Explorer (Sidebar)

A dedicated sidebar panel that scans your entire workspace and shows every SCSS variable, CSS custom property, mixin, function, and placeholder selector — all in one place.

• Color Palette — visual grid of every color in your project with live preview swatches
• CSS @property Browser — dropdown to switch between registered property syntax types: <color>, <length>, <number>, <percentage>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, and more
• Value Swatches — non-color registered properties display as swatches with their value shown inside
• Live On-Type Scanning — the sidebar updates as you type, no save required
• Resizable Palette — drag the handle to reveal more swatches
• Search & Filter — search across all tokens, filter by type ($ Vars, Colors, Mixins, fn(), -- CSS, % Ext)
• Group by File or Type — toggle between file-grouped and type-grouped views
• Copy as var() — clicking a CSS custom property copies var(--name) to clipboard
• Insert at Cursor — insert any symbol directly into your active editor
• Navigate to Source — click any symbol to jump to its definition
• Export Palette — export colors as SCSS variables, CSS custom properties, or JSON
• Right-Click — right-click a color swatch to copy the raw color value

Namespace-Aware Autocomplete

Type a namespace followed by . and get scoped completions — functions, mixins, and variables from that specific import. Completions insert correctly: fn.myFunction(), fn.$primary, @include fn.my-mixin().

@use "@styles/colors" as c;
@use "@styles/mixins" as *;

.button {
  background: c.$primary;           // variable autocomplete
  color: c.darken(c.$primary, 10%); // function autocomplete + signature help
  @include responsive(768px);       // wildcard mixin — no prefix needed
}

Path Completion with Aliases

Start typing inside @use "" and get instant path suggestions. Supports custom aliases like @, @styles, ~, or anything you configure.

@use "@styles/variables" as vars;   // @ → ./src
@use "@components/button/styles";   // @components → ./src/components
@use "~bootstrap/scss/functions";   // ~ → ./node_modules

Signature Help

Open a parenthesis after a function or mixin call and see parameter names, types, and default values inline.

// Typing fn.calculate-rem( shows:
// @function calculate-rem($px, $base: 16px)
//                         ^^^
//   $px
//   $base — default: 16px

Hover Documentation

Hover over any symbol to see its full signature, parameter list, value, source file, and line number.

Go to Definition

Cmd+Click (Mac) / Ctrl+Click (Windows/Linux) on any function, mixin, or variable to jump to its source — even across aliased paths and namespaces.

CSS @property Support

Detects CSS registered custom properties and extracts their syntax type and initial value:

@property --accent {
  syntax: "<color>";
  inherits: false;
  initial-value: #3794ff;
}

The sidebar automatically categorizes this under the Color Palette. Properties with other syntax types (<length>, <angle>, etc.) appear in their own dropdown category.

Embedded Style Support

Works inside <style lang="scss"> blocks in:

• Vue (.vue)
• Svelte (.svelte)
• Astro (.astro)
• HTML (.html)

Configuration

Add to your settings.json:

{
  // Path aliases — map short prefixes to directories
  "scssIntellisense.pathAliases": {
    "@": "./src",
    "@styles": "./src/styles",
    "@components": "./src/components",
    "~": "./node_modules"
  },

  // Additional directories to search for imports
  "scssIntellisense.includePaths": [
    "node_modules",
    "src/styles"
  ],

  // How deep to scan nested imports (default: 30)
  "scssIntellisense.scannerDepth": 30
}

Supported Sass Patterns

Namespaced imports — @use "colors" as c → access via c.$var, c.fn()

Wildcard imports — @use "mixins" as * → access directly, no prefix

Default namespace — @use "utilities" → auto-namespaced as utilities.$var

Functions with parameter completion and signature help

Mixins with @include completion and parameter hints

Variables with value preview and color detection

Placeholder selectors with @extend %name completion

Installation

VS Code Marketplace

Search for "SCSS IntelliSense" in the Extensions panel, or run:

ext install scss-intellisense

From VSIX

# Build from source
npm install
npm run compile
npm run package

# Install the .vsix
code --install-extension scss-intellisense-*.vsix

Troubleshooting

No completions showing?

1. Check that your @use paths resolve correctly
2. Verify path aliases match your project structure
3. Run Developer: Reload Window from the command palette

Embedded styles not working?

• Ensure your <style> tag has lang="scss" — the extension only activates for SCSS blocks

Requirements

• VS Code 1.75.0+
• SCSS/Sass files in your project

License

MIT

Contributing

Issues and PRs welcome at github.com/dev-bazz/sass-intellisnes.