Spacing scale generation in SASS

Introduction

Spacing scale helps keep consistent space sizes in your design. It makes your layout neat and balanced.

When you want to set consistent margins and paddings across your website.

When you need to quickly adjust spacing by changing one place.

When you want to create a design system with reusable spacing values.

When you want to avoid guessing pixel values for gaps and spaces.

When you want your site to look balanced on different screen sizes.

Syntax

SASS

@function spacing-scale($step) {
  @return $step * 0.5rem;
}

// Usage example:
.element {
  margin-bottom: spacing-scale(4); // 2rem
}

The function takes a number and returns a space size in rem units.

Using rem units helps keep spacing relative to the root font size, making it responsive.

Examples

This example uses 0.25rem as the base unit, so step 2 equals 0.5rem.

SASS

@function spacing-scale($step) {
  @return $step * 0.25rem;
}

.box {
  padding: spacing-scale(2); // 0.5rem
}

Here, each step equals 1rem, so step 3 equals 3rem spacing.

SASS

@function spacing-scale($step) {
  @return $step * 1rem;
}

.container {
  margin-top: spacing-scale(3); // 3rem
}

This example uses a map to store spacing values for easy reuse.

SASS

$spacing-values: (0: 0, 1: 0.5rem, 2: 1rem, 3: 1.5rem);

.element {
  padding: map-get($spacing-values, 2); // 1rem
}

Sample Program

This code defines a spacing scale function that multiplies the step by 0.5rem. The container uses padding and margin from the scale to keep spacing consistent. The text inside also uses the scale for margin.

SASS

@function spacing-scale($step) {
  @return $step * 0.5rem;
}

.container {
  padding: spacing-scale(4);
  margin-bottom: spacing-scale(2);
  background-color: #e0f7fa;
  border: 1px solid #00796b;
  width: 300px;
  font-family: Arial, sans-serif;
}

.text {
  margin-top: spacing-scale(3);
  color: #004d40;
  font-size: 1rem;
}

Important Notes

Use rem units for spacing to keep it scalable with user settings.

Changing the base multiplier in the function updates all spacing at once.

Keep spacing steps consistent to maintain visual rhythm.

Summary

Spacing scale helps create consistent and easy-to-manage space sizes.

Use a function or map in Sass to generate spacing values.

Use rem units for responsive and accessible spacing.