Variables and Reusable Design Tokens

Sass variables begin with $ and hold values that can be reused throughout a stylesheet. Common examples include brand colors, spacing scales, font families, border radii, breakpoints, and shadow definitions.

Sass variables are resolved during compilation. Updating $primary-color in the source changes every declaration that references it, but the resulting CSS contains ordinary values rather than the Sass variable.

Sass variables can be reassigned, although shared design tokens should generally be treated as stable values. Unnecessary reassignment makes the meaning of later declarations harder to follow.

A well-designed token system centralizes values that must remain consistent while allowing component-specific values where genuine variation is needed.

Create a Design Token Set

$color-primary: #5b5bd6;
$color-text: #222;
$space-sm: 0.5rem;
$space-md: 1rem;
$radius-md: 0.5rem;

.button {
  padding: $space-sm $space-md;
  color: white;
  background: $color-primary;
  border: 0;
  border-radius: $radius-md;
}

body {
  color: $color-text;
}

💡 Each variable represents a reusable design decision. If the primary brand color changes, components that reference $color-primary receive the updated compiled value. Use descriptive token names so that the intention of a value is clear. Semantic names such as $color-primary are often more maintainable than names based only on appearance, such as $purple.

Key Takeaways

Sass variables begin with $.
Variables are useful for repeated design decisions.
Semantic tokens communicate intent more clearly than arbitrary names.
Sass variables are resolved at compile time.

Knowledge Check

What happens when a Sass variable is changed and the stylesheet is recompiled?

Variables and Reusable Design Tokens

STAY UPDATED WITH BYTES!