Flexbox utility class generation in SASS - Mini Project: Build & Apply

Flexbox Utility Class Generation with Sass

📖 Scenario: You are creating a small set of reusable CSS utility classes to control flexbox layouts easily. These classes will help you quickly apply flexbox properties like direction, alignment, and justification to HTML elements without writing repetitive CSS.

🎯 Goal: Build a Sass file that generates flexbox utility classes for flex-direction, justify-content, and align-items using Sass loops and maps. This will let you add classes like .flex-row, .justify-center, and .items-start to your HTML elements.

📋 What You'll Learn

Create a Sass map called $flex-directions with keys row and column and their corresponding CSS values.

Create a Sass map called $justify-options with keys start, center, and end and their CSS values.

Create a Sass map called $align-options with keys start, center, and end and their CSS values.

Use Sass @each loops to generate utility classes for each map with the correct CSS properties.

The final CSS classes should be named .flex-KEY, .justify-KEY, and .items-KEY where KEY is the map key.

💡 Why This Matters

🌍 Real World

Utility classes like these are used in many CSS frameworks to speed up styling and keep CSS DRY (Don't Repeat Yourself).

💼 Career

Knowing how to write Sass loops and maps to generate CSS helps you work efficiently in front-end development and maintain large stylesheets.

1

Create the $flex-directions map

Create a Sass map called $flex-directions with these exact entries: row: row and column: column.

SASS

# Create the $flex-directions map with keys 'row' and 'column'
# Your code here

Need a hint?

Use parentheses ( ) to create a Sass map. Separate keys and values with a colon : and entries with commas.

2

Create the $justify-options and $align-options maps

Create two Sass maps: $justify-options with keys start: flex-start, center: center, end: flex-end; and $align-options with keys start: flex-start, center: center, end: flex-end.

SASS

$flex-directions: (
  row: row,
  column: column
);

# Create $justify-options and $align-options maps with keys start, center, end
# Your code here

Need a hint?

Remember to use commas between entries and colons between keys and values.

3

Generate .flex- utility classes using @each

Use a Sass @each loop with variables $name and $value to iterate over $flex-directions. Inside the loop, create a class named .flex-#{$name} that sets display: flex and flex-direction: $value.

SASS

$flex-directions: (
  row: row,
  column: column
);

$justify-options: (
  start: flex-start,
  center: center,
  end: flex-end
);

$align-options: (
  start: flex-start,
  center: center,
  end: flex-end
);

# Use @each to create .flex- classes with display and flex-direction
# Your code here

Need a hint?

Use @each $name, $value in $flex-directions { ... } and inside create the class with interpolation .flex-#{$name}.

4

Generate .justify- and .items- utility classes

Use two Sass @each loops: one to create .justify-#{$name} classes setting justify-content: $value from $justify-options, and another to create .items-#{$name} classes setting align-items: $value from $align-options.

SASS

$flex-directions: (
  row: row,
  column: column
);

$justify-options: (
  start: flex-start,
  center: center,
  end: flex-end
);

$align-options: (
  start: flex-start,
  center: center,
  end: flex-end
);

@each $name, $value in $flex-directions {
  .flex-#{$name} {
    display: flex;
    flex-direction: $value;
  }
}

# Use @each to create .justify- classes from $justify-options
# Use @each to create .items- classes from $align-options
# Your code here

Need a hint?

Repeat the @each pattern for both maps, creating classes with the correct property names.