CSS Variable Extractor - Custom Property Inspector & Exporter

How to use this tool

1. Paste your CSS into the input area.
2. Review declarations, color swatches, var() usage counts, fallbacks, and undeclared references in the result tabs.
3. Filter and sort declarations, then copy CSS or CSV or download the name, value, and selector rows as JSON.

CSS custom properties (variables)

CSS custom properties (commonly called CSS variables) are defined with a double-dash prefix and can be reused throughout a stylesheet. They are scoped to the element where they are defined and cascade to descendants.

Syntax

/* Define on :root to make globally available */
:root {
  --primary-color: #3b82f6;
  --spacing-base: 1rem;
}

/* Use with var() */
.button {
  background: var(--primary-color);
  padding: var(--spacing-base);
}

/* Fallback value */
color: var(--text-color, #111);

Advantages over preprocessor variables

• Live in the DOM - can be changed at runtime with JavaScript (element.style.setProperty('--color', 'red')).
• Respect the cascade - you can override a variable for a specific component or theme without changing the global value.
• No build step required; they work in plain CSS.

Color theming pattern

Implement light/dark mode using CSS custom properties and a combination of prefers-color-scheme and a data-theme attribute:

:root {
  --bg-color: #fff;
  --text-color: #111;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #111;
    --text-color: #eee;
  }
}

[data-theme="light"] {
  --bg-color: #fff;
  --text-color: #111;
}

[data-theme="dark"] {
  --bg-color: #111;
  --text-color: #eee;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

The prefers-color-scheme media query respects the OS-level dark mode preference. The data-theme attribute allows users to override the OS setting with a manual toggle. JavaScript can switch the theme by changing document.documentElement.dataset.theme.

Inspect nested rules and variable usage

The extractor scans pasted CSS while skipping comments and quoted strings, so text that looks like a declaration or var() call inside either one is ignored. It follows nested group rules such as @media and shows the at-rule and selector path next to each declaration. For common CSS nesting, a child selector using & is expanded with its parent; a nested selector without & is treated as a descendant. This is a lightweight CSS scanner, not a complete CSS parser or an SCSS compiler, so use a full parser for unusual syntax or Sass-specific features.

The Usages view separately counts each var(--name) reference and lists distinct fallback expressions, including nested fallbacks such as var(--missing, var(--backup, #fff)). Orphans highlights names that are referenced but never declared in the pasted stylesheet. A name is considered declared if it appears in any extracted rule; this check does not compute cascade, inheritance, selector matching, or styles supplied by another file. The declaration table previews supported literal CSS colors from hexadecimal, rgb(), hsl(), and named-color values, while spacing values such as 1rem remain text only.

Copy CSS rebuilds the extracted declarations and retains their nested at-rule wrappers, while Copy CSV and Download JSON export the same currently extracted declarations. Each JSON row has a name, value, and selector; nested rows show a readable context path in that selector field. Processing stays in this browser tab: CSS is not uploaded, saved, or fetched from a URL. Review the output before using it in production because the scanner does not validate the rest of the stylesheet.

CSS variable naming conventions

• BEM-style: --block-element-property (e.g., --button-background-color). Good for component-scoped variables.
• Design token style: --color-primary, --spacing-4, --font-size-lg. Preferred for design systems and global scales.
• Semantic naming: --text-color, --background-color instead of --color-blue. Easier to maintain when you rebrand.

Consistency matters more than the specific convention. Document your naming pattern in a README or style guide.