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

css-variables-language-server

2.7.0

Minor Changes

• 3a5bfa9: Add executable for language server to run from the commandline.

  $ npm install -g css-variables-language-server
  $ css-variables-language-server --stdio

2.6.4

Patch Changes

• f380403: feat: 52 support for color functional notation fix: excessive highlighting when hovering over variable

2.6.2

Patch Changes

• a36efd0: Ignore .next & .cache folders, reorder alphabetically

2.6.1

Patch Changes

• 50a631d: remove commit characters as it confuse some users

2.5.0

Minor Changes

• 1eedbba: use postcss-sass and postcss-less to parse the relevant files

2.4.1

Patch Changes

• 0bdec05: Fix go to definition

2.4.0

Minor Changes

• 6a56298: Support TailwindCSS, reduce extension size, impove load time by 10x, use monorepo