What are CSS custom properties (CSS variables)?

CSS custom properties (also called CSS variables) are entities defined with a -- prefix that can be referenced throughout the document via the var() function. For example, :root { --main-color: #007bff; } defines a variable, and .btn { color: var(--main-color); } uses it. Unlike preprocessor variables, CSS variables are evaluated at runtime and can be dynamically modified via JavaScript.

What is the difference between CSS variables and SCSS/Less variables?

SCSS/Less variables are replaced at compile time — the generated CSS no longer contains the variable name. CSS variables are a native browser feature, evaluated at runtime, supporting cascade inheritance and dynamic modification. CSS variables can respond to media queries and user interaction, while preprocessor variables cannot. This tool supports exporting both CSS variable and SCSS variable formats.

How do I implement dark mode with CSS variables?

Define two sets of variables: :root { --bg: #fff; --text: #333; } for light mode, and :root.dark { --bg: #1a1a1a; --text: #eee; } for dark mode. Toggle the .dark class to switch themes. This tool's theme toggle helps preview dark mode variable effects. Export with the "Dark" theme selected to generate the dark variable set.

How do I use CSS variables with Tailwind CSS?

Reference CSS variables in tailwind.config.js under theme.extend. For example: colors: { primary: 'var(--primary)' }. Then use classes like bg-primary in your markup. This tool's Tailwind export automatically converts variables to the Tailwind config format for direct use.

CSS Variables Manager

Manage CSS custom properties with import, preview, and multi-format export

Category:Theme:

Variables (15)

Name	Value	Type	Category	Actions

Live Preview

Sample Card Title

This sample text demonstrates typography variable effects. Adjust variable values on the left to preview changes in real time.

Export Code

:root {
  --primary: #007bff;
  --primary-contrast: #ffffff;
  --secondary: #6c757d;
  --text-color: #333333;
  --text-secondary: #666666;
  --bg-color: #ffffff;
  --btn-padding: 8px 16px;
  --input-padding: 8px 12px;
  --font-family: system-ui, sans-serif;
  --font-size: 16px;
  --line-height: 1.6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --radius: 4px;
  --border-color: #ced4da;
}

CSS Variables Manager Guide

Features

Variable Management — add, edit, delete CSS custom properties
Category Management — colors, spacing, typography, shadows, borders
Live Preview — see variable effects on sample components in real time
Theme Switching — supports light/dark theme variables
Multi-format Export — CSS :root, SCSS, Tailwind, JSON
Import Parsing — import variables from existing CSS

Use Cases

Design system / Design Token management
Centralized website theme variable configuration
Quick Tailwind config generation
Team-standardized variable naming
Multi-theme preview and switching

CSS Variables Manager

Sample Card Title

CSS Variables Manager Guide

Features

Use Cases

常见问题

相关工具