Details here: Customize Extension

This extension helps to autocomplete globally shared CSS Variables and a lot more.

• Provides Auto Completion for CSS Variables across VSCode workspaces.
• Supports CSS, SASS, JS, TS etc. Find complete list in Supported Extensions.
• Color swatch attached to each usage of var(--color-variable).
• Goto Definition for CSS Variables.
• Customization
  • If your project uses SASS/LESS, and you are facing issues to setup this extension, please read Customization Doc.
• Theme Support

This Extension supports the following properties as of now:

• cssvar.files: Array of Strings: string[]

  • Should contain relative/absolute path from your workspace root folder.
  • Supports glob patterns.
  • Only keep the files that have CSS Variables; this will boost the performance.

• cssvar.extensions: Array of String: string[]

"css" | "scss" | "sass" | "less" | "postcss" | "vue" | "svelte" | "ts" | "tsx" | "jsx" | "js"

NOTE: Open issue to add more extension support.

• cssvar.themes: Array of String: string[]
  • Eg: cssvar.themes: ["dark"]. This will help the extension distinguish between similarly named variables.
• cssvar.excludeThemedVariables: boolean
• cssvar.disableSort: boolean
  • Disables VSCode's default sorting functionality for this extension.
• cssvar.enableColors: boolean
  • Enable CSS Variable color display everywhere.
  • If this config is changed, reload VSCode window.
• cssvar.enableGotoDef: boolean
  • Enable VScode's Goto Definition feature for CSS Variables
  • If this config is changed, reload VSCode window.
• cssvar.postcssPlugins: string[]
  • Details for this can be read here: Customize Extension
• cssvar.postcssSyntax: string[]
  • Details for this can be read here: Customize Extension

Following are defaults, which you can override in your User settings.json or Workspace settings.json.

• cssvar.files: ["index.css"]
• cssvar.extensions: ["css", "scss", "sass", "less"]
• cssvar.themes: []
• cssvar.excludeThemedVariables: false
• cssvar.disableSort: false
• cssvar.enableColors: true
• cssvar.enableGotoDef: true
• cssvar.postcssPlugins: []
• cssvar.postcssSyntax: []

NOTE: Please raise an issue for any feature request or a bug fix.