Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>css-variable-hintNew to Visual Studio Code? Get it now.

css-variable-hint

arichy

|
89 installs
| (0) | Free
Completion and goto definition for css variables.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

css-variable-hint

Features

Add some css variables language features for .css, .scss files:

  • CSS variable completion alt command

  • CSS variable goto definition alt command


Advantages compared with other similar extensions:

  • Support multiple variables: It's very common that we need to declare one css variable with multiple values. For example, to support dark mode, we often declare a color variable in html, and declare the same color variable in html[data-theme=dark] with another value. This extension will display all values for every variable to let you choose freely.

  • Source tree display: One variable may have multiple values, so this extension will display every value with its source to let you recognize which one is what you need. alt command

  • Hot-reload: File changes outside node_modules can be watched to update the completion items.

Extension Settings

This extension contributes the following settings:

  • cssVariableHint.lookupFiles
    • description: Files to look for all css variables. Support .css, .scss, .less files.
    • defaultValue: []

Known Issues

File changes in node_modules cannot be watched because of vscode's default files.watcherExclude setting, so if you changed css variables in node_modules, you need to run the command CSS Variable Hint: Restart Server in vscode.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft