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

Spacing Utility Generation with Sass

📖 Scenario: You are creating a simple spacing utility in Sass to help add margin and padding easily in a web project. This utility will generate CSS classes for different spacing sizes.

🎯 Goal: Build a Sass file that defines a map of spacing sizes, a variable for the CSS property to apply, a loop to generate utility classes for each spacing size, and finally include the generated CSS in a container selector.

📋 What You'll Learn

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

Create a variable called $property and set it to margin.

Use a @each loop to generate CSS classes named .m-small, .m-medium, and .m-large that apply the corresponding margin size from the map.

Wrap the generated classes inside a .spacing-utilities container selector.

💡 Why This Matters

🌍 Real World

Spacing utilities help developers quickly add consistent margin and padding in web projects without writing repetitive CSS.

💼 Career

Knowing how to generate utility classes with Sass maps and loops is a valuable skill for front-end developers working on scalable CSS architectures.

1

Create the spacing sizes map

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

SASS

# Your code here

Need a hint?

Use parentheses ( ) to create a map and separate entries with commas.

2

Add the property variable

Create a variable called $property and set it to the string margin.

SASS

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

# Your code here

Need a hint?

Use $property: margin; to create the variable.

3

Generate utility classes with a loop

Use a @each loop with variables $name and $size to iterate over $spacing-sizes and generate CSS classes named .m-#{$name} that set the $property to $size.

SASS

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

$property: margin;

# Your code here

Need a hint?

Use interpolation #{$name} to insert the map key into the class name.

4

Wrap utilities inside a container selector

Wrap the @each loop inside a container selector called .spacing-utilities.

SASS

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

$property: margin;

# Your code here

Need a hint?

Wrap the loop inside .spacing-utilities { ... } to group the classes.