Good questions.
Useful answers.
Getting started, finding your tokens, and making the plugin work for you.
Getting started
Which JetBrains IDEs can I use it with?
CSS Variables Assistant needs an IDE with bundled JavaScript and CSS support: WebStorm, IntelliJ IDEA Ultimate, PhpStorm, PyCharm Professional, GoLand, or RubyMine. Check the Marketplace compatibility list for your exact IDE build before installing.
Is the plugin free?
Yes. CSS Variables Assistant is free and open source. Install it from JetBrains Marketplace, or download the signed plugin ZIP from the GitHub releases page.
How do I install the ZIP manually?
Download the plugin ZIP from an official GitHub release. In your IDE, open Settings > Plugins, use the gear menu and choose Install Plugin from Disk. Select the ZIP and restart the IDE if prompted.
Variables & themes
Which stylesheet languages are supported?
CSS custom properties and var() references, direct $variables in SCSS and indented Sass, and @variables in LESS. CSS injected by the IDE is also supported. This does not mean arbitrary JavaScript, TypeScript, JSX or TSX strings are treated as stylesheets.
Can I see the values for different themes?
Yes. Quick Documentation shows declared default, theme, and media-query alternatives with their values and sources. Color swatches and declaration comments add context. The browser still determines the applied value using matching selectors and stylesheet order.
Does it calculate every value or run Sass and LESS?
The plugin provides static token insight. It does not run a Sass or LESS program or simulate the browser's full CSS cascade. Unsupported or ambiguous expressions remain literal. Pixel equivalents for relative units are estimates based on default font and viewport assumptions.
Imports & settings
Which indexing scope should I choose?
Project + imports is the default. It includes tokens in your project and explicitly imported dependencies. Project only excludes node_modules; Full global broadens discovery. Open Settings > Tools > CSS Variables Assistant to change the scope.
Does it follow Sass modules and package imports?
Yes. The plugin follows stylesheet imports, Sass partials, @use and @forward, including supported package entrypoints. To inspect what a file imports, right-click a CSS, SCSS, Sass or LESS file and choose Debug CSS Import Resolution.
Can I change the completion order?
Yes. Under Settings > Tools > CSS Variables Assistant, choose By value ascending (the default), By value descending, or Alphabetical by name. Exact variable-name matches retain priority.
Troubleshooting
Why is a variable missing from suggestions?
First check the variable name, stylesheet context, and whether the declaring file is included in your indexing scope. Use Debug CSS Import Resolution to inspect imports. If values still look stale, use Re-index Now in the plugin settings. If the problem persists, report an issue with your IDE version, plugin version and a small example.
Do I need to change settings after updating to 1.9.4?
No settings change is required. The variable index rebuilds once after upgrading. Version 1.9.4 improves imported-value freshness, parsing, source attribution, alias handling and completion contexts.
Still have a question?
Take a look at the documentation, or open an issue on GitHub with a small example. It helps make the plugin better for everyone.