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