Working with CSS Variables is a pain, this extension enhances the Web Development experience by providing advanced features such as autocomplete, color preview, and go to definition.

Installation

Install via the Visual Studio Code Marketplace →

By default the extension only scan files with this glob patterns:

[
	"**/*.css",
	"**/*.scss",
	"**/*.sass",
	"**/*.less"
]

And ignore files in these folders:

[
	"**/.git",
	"**/.svn",
	"**/.hg",
	"**/CVS",
	"**/.DS_Store",
	"**/node_modules",
	"**/bower_components",
	"**/tmp",
	"**/dist",
	"**/tests"
]

And provides suggestions to files for the following languages

[
	"astro",
	"svelte",
	"vue",
	"vue-html",
	"vue-postcss",
	"scss",
	"postcss",
	"less",
	"css",
	"html",
	"javascript",
	"javascriptreact",
	"typescript",
	"typescriptreact",
	"source.css.styled"
]

Features

Autocomplete & Color Preview

Intelligent suggestions for all css variables in the project

Go to definition

You can easily knows where the variable coming from by hold Alt/Cmd and click to the variable.

FAQ

I want to add files in node_modules folder

.vscode/settings.json

{
  "cssVariables.lookupFiles": [
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "node_modules/open-props/open-props.min.css"
  ]
}

I want to add files from public url, CDN

src/style.css

@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/tailwind-colors/dist/css/colors.min.css';

body {
  color: var(--indigo-50);
}

...

Example source code https://github.com/vunguyentuan/test-css-var

Full demo