Shimin-Zhang/vscode-cssvar

VSCode extension to support CSS Variables Intellisense

CSSVar (A VSCode Extension)

This extension helps to autocomplete globally shared CSS Variables.

Only those variables that are present in files, provided in Extension files config, will be considered as global.

Supported Configs:

This Extension supports the following properties as of now:

• cssvar.files: Array of Strings: string[]
  • Support glob patterns
• cssvar.extensions: Array of String: string[]
• 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.files should contain relative/absolute path from your workspace root folder.

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

Screeshots:

How to Install

Working Example

Theming Support:

Supported Features:

• Show Auto Completion dialogue on trigger chars: --
• Show Color Values and Colors in Autocomplete popup.
• Minimal support for CSS Modules, using postcss.
  • This is to make sure, the extension doesn't breaks on CSS Module Files.
• Themed CSS Variable support.

Issues:

• SASS/LESS variables, or any specific CSS extension language feature.
  • For eg. setting CSS variable to a SASS Variable will work, but will not be considered as a CSS color.
  • Workaround
    • Create a separate CSS compatible SASS/LESS (variables) file.
    • Remove SASS One line Comments. Use proper CSS block comments.