CSS Variables

When choosing the CSS Variables export method, Variables Xporter will generate a CSS file containing all CSS variable definitions. This approach is simpler and more flexible, suitable for projects not using Tailwind CSS.

Features

1. Simple and intuitive

Directly outputs standard CSS custom properties:

:root {
  --colors-primary: #c03939;
  --colors-primary-foreground: #ffffff;
  --font-size-heading-1: 2.5rem;
  --line-height-heading-1: 1.2;
}

2. Flexible usage

These variables can be used in any CSS rule:

.button {
  background-color: var(--colors-primary);
  color: var(--colors-primary-foreground);
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

3. Multi-mode support

With the help of variable tracing and single source of truth principle, Variables Xporter can achieve complex multi-mode variable exports.

:root {
  --colors-primary: var(--colors-primary-light);
}
 
.dark {
  --colors-primary: var(--colors-primary-dark);
}

Variable organization recommendations

Compared to Tailwind CSS, the CSS Variables export method has lower requirements for variable organization. However, it’s still recommended that you follow good organizational principles, which can:

• Improve variable maintainability
• Maintain design system consistency
• Facilitate team collaboration
• Prepare for potential future framework migrations

Basic principles

You can start by understanding the basic principles of variable organization, which can help you make better decisions in naming, grouping, and hierarchical structuring of variables.

Variable types

Then, you can further organize your variables based on different variable types.