CSS Variables Assistant

CSS Variables
Assistant

Get from Marketplace
Product galleryProduct galleryProduct gallery

JetBrains
Marketplace

CSS Variables Assistant

CSS Variables Assistant Enhances CSS variable usage with autocomplete and documentation. Shows variable values in completion suggestions on typing and documentation on...
628 downloads
Free

Features

Professional CSS custom properties development for JetBrains IDEs

Transform your CSS development workflow with intelligent autocomplete, comprehensive documentation, and advanced IntelliSense for CSS custom properties. Perfect for modern CSS frameworks, design systems, and responsive web development.

  • Intelligent CSS Variables Autocomplete

    Advanced IntelliSense for CSS custom properties with live preview, resolved values, and context-aware suggestions inside var(--...) functions

    • Plugin-specific icons identify CSS Variables Assistant suggestions
    • Variable names with @description JSDoc annotations
    • Resolved values (colors: #FFF, hsl(), rgb() | sizes: rem, px, em)
    • Context-aware suggestions with @media query declarations count
    Button.module.css
    1.button {
    2font-size: var(
    font-size-lg- Large font size20px
    font-size-md- Medium font size18px
    font-size-sm- Small font size16px
    font-size-xs- Extra small font ...14px
    3}

  • Rich Hover Documentation

    Simply hover over any CSS variable in your code to reveal comprehensive documentation - see all values, responsive breakpoints, color swatches, and helpful links instantly

    • Context-aware tables showing all breakpoint values
    • Visual color swatches for both light/dark themes
    • One-click links to MDN docs and contrast checkers
    • JSDoc support for custom descriptions and examples
    Button.module.css
    1.button {
    2background: var(--background);
    CSS Variable: --background

    Values:

    ContextValue
    Light mode0 9.1% 97.8%
    Dark mode0 0% 2%
    Check contrast on WebAIM Contrast Checker ↗'var(--background)' on developer.mozilla.org ↗
    3}

  • Flexible CSS Variables Indexing Scope

    Configurable variable discovery: project-only, with imports, or global (node_modules) to match your development workflow

    • PROJECT: Index only current project variables
    • PROJECT + IMPORTS: Include @import and linked stylesheets
    • GLOBAL: Full node_modules and external dependencies
    • Re-index button for instant cache refresh
    ⚙️Tools > CSS Variables Assistant
    ○

    PROJECT

    Index only current project variables

    ○

    PROJECT + IMPORTS
    ️ experimental

    Include @import and linked stylesheets

    ●

    GLOBAL
    default

    Full node_modules and external dependencies

  • Smart Value-Based Sorting

    CSS variables automatically sorted by computed values for logical selection - sizes by magnitude, colors by hue, ensuring intuitive autocomplete order

    • Numeric values sorted by magnitude (8px, 16px, 24px)
    • Color values grouped and sorted by hue/lightness
    • Alphabetical fallback for complex values
    • Configurable sorting preferences in settings
    styles.css
    1padding: var(--sp
    Sorted by value (descending)
    spacing-lg24px
    spacing-sm8px
    spacing-xs4px

Compatible with IntelliJ IDEA, WebStorm, PhpStorm, and all JetBrains IDEs. Supports CSS, SCSS, SASS, LESS, and modern CSS-in-JS workflows.

Preview

Explore the plugin's features through these screenshots.

Plugin screenshot 1

Installation Guide

Follow these steps to install the CSS Variables Assistant plugin in your IDE.

Installing in Your IDE

  1. Open WebStorm (or any IntelliJ-based IDE)
  2. Go to Settings → Plugins → Marketplace
  3. Search for "CSS Variables Assistant"
  4. Click Install
  5. Restart the IDE when prompted

Direct Installation

Get from Marketplace

Click the button above to open the plugin page in JetBrains Marketplace

Manual Installation

  1. Download the plugin ZIP file
  2. In your IDE, go to Settings → Plugins
  3. Click the gear icon and select Install Plugin from Disk...
  4. Select the downloaded ZIP file
  5. Restart the IDE when prompted

CSS Variables Assistant Plugin for JetBrains IDEs

CSS Variables Assistant is the most advanced CSS custom properties plugin for IntelliJ IDEA, WebStorm, PyCharm, PhpStorm, and all JetBrains IDEs. Get intelligent autocomplete for var() functions, real-time documentation with color swatches, and advanced @import resolution for CSS, SCSS, SASS, and LESS files.

Key Features of CSS Variables Assistant

  • Smart autocomplete inside var(--…) with live previews
  • Quick documentation (Ctrl+Q) showing values, descriptions, and color swatches
  • JSDoc-style comment support with @name, @description, and @example tags
  • Advanced @import resolution with configurable scope and depth
  • Multi-preprocessor support for CSS, SCSS, SASS, and LESS
  • Works in CSS, SCSS, SASS, LESS, JavaScript, TypeScript, JSX, and TSX files

Supported JetBrains IDEs

  • IntelliJ IDEA Ultimate and Community EditionJava IDE with CSS support
  • WebStormThe smartest JavaScript IDE with advanced CSS features
  • PyCharm Professional and Community EditionPython IDE with web development
  • PhpStormLightning-smart PHP IDE with CSS and SCSS support
  • RubyMineThe most intelligent Ruby IDE with web development tools
  • CLionSmart cross-platform IDE for C and C++ with CSS support
  • GoLandCross-platform IDE built for Go with web development features

CSS Preprocessor and Framework Support

Works seamlessly with all major CSS preprocessors including SCSS variables, SASS mixins, LESS variables, and native CSS custom properties. Advanced @import resolution handles node_modules dependencies and scoped packages. Perfect for modern web development workflows with React, Vue, Angular, and other frameworks.

Installation and Download

Download CSS Variables Assistant from the official JetBrains Marketplace. The plugin has 628 downloads and maintains a 4.17599 star rating. Installation takes less than 2 minutes through your IDE's plugin marketplace.

CSS Variables AssistantCSS custom propertiesIntelliJ IDEA pluginWebStorm pluginJetBrains CSS pluginCSS autocompleteCSS variables intellisenseSCSS variables pluginCSS var() autocompleteCSS documentation pluginSASS variables supportLESS variables IDECSS @import resolutionJetBrains IDE CSS toolsCSS development plugin