CSS Variables Assistant
v1.9.4Small update. Clearer insights.

Know your tokens.
Keep your flow.

Find the right variable. See its value, theme, and source. All without leaving your JetBrains editor.

Install from MarketplaceExplore
Free & open source. Built for your IDE.
Downloads
14,233
4 ratings
4.1 / 5
On JetBrains Marketplace
Try it for yourself
CSS Variables AssistantIntelliJ IDEA · Dark theme
accept-completion.csstheme.css
1@import "./theme.css";
2
3.button {
4 background: var();
5}
6
  • brand-mint#A8C9AF
  • brand-iris – Primary brand color for interactive elements.#B8A4F4 / 🌙 #CAB9FF
  • brand-peach#E9AC95
Press ⌃. to choose the selected (or first) suggestion and insert a dot afterwards
CSSLFUTF-82 spaces
The right token, right where you need it.

Choose a suggestion, or type a variable name. Use ↑ ↓ and Enter or Tab to insert it.

Interactive example.
Recreated from the plugin UI.
For JetBrains IDEs with
JavaScript and CSS support.
A name is just the beginning

See the whole picture.
Stay in the same file.

A variable can live in another file, change with a theme, or point to another token. Bring that context to where you work.

--brand-iris
ContextValueTypeSourceWCAG
Default#B8A4F4color2,18:1
Dark#CAB9FFcolor1,77:1

Shown in index order — runtime applied value depends on stylesheet load order and specificity.

Description:

Primary brand color for interactive elements.

Check contrast on WebAIM Contrast Checker
Themes & documentation

Same token. Different contexts.

The real popup shows Default and Dark values with swatches, declaration lines, type and contrast information.

Imports, sources & calculations

Follow the value
back home.

Behind every value is a story. Follow imported tokens to their declarations, and see the steps that turn a reference into a result.

01-imports-and-math.scssSCSS
@use "./scss/components" as controls;
.button {
background: controls.$button-background;
padding: controls.$button-padding;
border-radius: controls.$button-radius;
font-size: controls.$button-font-size;
}
controls.$button-background

↗ shows a resolved value - hover it to see every step (resolution chain)

ContextValueTypeSourceWCAG
Defaultcolor2,18:1
Check contrast on WebAIM Contrast Checker

Hover Value or Source. Click or tap to keep it open.

Explore the source files
scss/_components.scss
@use "./semantic" as *;
$button-background: $action-color;
$button-padding: ($space-medium * 2);
$button-radius: $radius-control;
$button-font-size: $type-label;
Resolved value#B8A4F4

Browse the example project. The plugin shows the source in its hover popup.

scss/_components.scss, line 3

One color. Three source files.

Follow the button token through its semantic alias to the original color.

Interactive UI examples based on CSS Variables Assistant 1.9.4 in IntelliJ IDEA. Your values come from your project.

Your syntax. Your workflow.

A familiar feeling.
In every stylesheet.

Native CSS custom properties, Sass variables, or LESS. Get completion and documentation right where you reference them.

  • Values alongside suggestions
  • Aliases traced to their source
  • Your preferred completion order
background: var(--brand-iris);
--brand-iris
ContextValueTypeSourceWCAG
Default#B8A4F4color2,18:1
Dark#CAB9FFcolor1,77:1

Shown in index order — runtime applied value depends on stylesheet load order and specificity.

Description:

Primary brand color for interactive elements.

Check contrast on WebAIM Contrast Checker
The same documentation workflow across four stylesheet languages.
One small addition to your editor

Goodbye, token hunt.
Hello, flow.

Free and open source.
Ready for your next stylesheet.

View on JetBrains Marketplace
Prefer a manual install? Get the ZIP
  1. 01

    Open your IDE’s Marketplace

    Settings Plugins Marketplace

  2. 02

    Find CSS Variables Assistant

    Search for the plugin by name and choose Install.

  3. 03

    Get back to your stylesheet

    Restart if prompted. Start typing a variable to see suggestions.

Questions before you install?