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.

Checkout Chronoid App - Automatic Time Tracking & Productivity for macOS →

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" ]

Intelligent suggestions for all css variables in the project

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

.vscode/settings.json

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

src/style.css

@import 'https://cdn.jsdelivr.net/gh/KunalTanwar/tailwind-colors/dist/css/colors.min.css'; body { color: var(--indigo-50); } ...