dodio / vscode-css-variables Goto Github PK

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.

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",
	"**/.git",
	"**/node_modules",
	"**/bower_components",
	"**/tmp",
	"**/dist",
	"**/tests"
]

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);
}

...