Spacing scale generation in SASS - Mini Project: Build & Apply

Spacing Scale Generation with Sass

📖 Scenario: You are creating a consistent spacing scale for a website using Sass. This scale will help keep margins and paddings uniform across the site.

🎯 Goal: Build a Sass map called $spacing-scale with specific spacing values, then create a variable for the base spacing unit, generate a new map with doubled spacing values, and finally output CSS custom properties for these spacing values.

📋 What You'll Learn

Create a Sass map named $spacing-scale with keys small, medium, and large and values 0.5rem, 1rem, and 2rem respectively.

Create a variable named $base-spacing and set it to 1rem.

Generate a new Sass map named $double-spacing by multiplying each value in $spacing-scale by 2.

Output CSS custom properties for each key in $double-spacing inside the :root selector.

💡 Why This Matters

🌍 Real World

Spacing scales help keep website design consistent and easy to update by centralizing spacing values.

💼 Career

Front-end developers use Sass maps and loops to manage design tokens like spacing, colors, and fonts efficiently.

1

Create the initial spacing scale map

Create a Sass map called $spacing-scale with these exact entries: small: 0.5rem, medium: 1rem, and large: 2rem.

SASS

# Create the $spacing-scale map with small, medium, and large keys
# Your code here

Need a hint?

Use parentheses ( ) to create a Sass map and separate key-value pairs with commas.

2

Add a base spacing variable

Create a variable called $base-spacing and set it to 1rem.

SASS

$spacing-scale: (
  small: 0.5rem,
  medium: 1rem,
  large: 2rem
);

# Create $base-spacing variable and set it to 1rem
# Your code here

Need a hint?

Variables in Sass start with $. Assign the value with a colon and end with a semicolon.

3

Generate doubled spacing map

Create a new Sass map called $double-spacing by multiplying each value in $spacing-scale by 2 using a @each loop and map-merge().

SASS

$spacing-scale: (
  small: 0.5rem,
  medium: 1rem,
  large: 2rem
);

$base-spacing: 1rem;

$double-spacing: ();

# Use @each to loop over $spacing-scale and multiply values by 2
# Add each doubled value to $double-spacing using map-merge
# Your code here

Need a hint?

Use @each $key, $value in $spacing-scale to loop. Use map-merge() to add to a map.

4

Output CSS custom properties for doubled spacing

Write CSS inside the :root selector that outputs custom properties for each key in $double-spacing using a @each loop. The property names should be --spacing- followed by the key, and the values should be the doubled spacing values.

SASS

$spacing-scale: (
  small: 0.5rem,
  medium: 1rem,
  large: 2rem
);

$base-spacing: 1rem;

$double-spacing: ();

@each $key, $value in $spacing-scale {
  $double-spacing: map-merge($double-spacing, ($key: $value * 2));
}

:root {
  /* Output CSS custom properties here using @each */
  # Your code here
}

Need a hint?

Use :root selector and inside it use @each $key, $value in $double-spacing. Output custom properties with --spacing-#{$key}: #{$value};.