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);
}
...
Full demo
