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

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

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

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

Hint

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

Practice

1. What is the main purpose of generating Flexbox utility classes using SASS?

easy

A. To disable Flexbox features in the browser

B. To write long CSS rules for each Flexbox property manually

C. To convert Flexbox layouts into grid layouts automatically

D. To create small reusable classes that quickly arrange items with Flexbox

Solution

1. Step 1: Understand Flexbox utility classes

   Flexbox utility classes are small CSS classes that help arrange items quickly using Flexbox properties.

2. Step 2: Role of SASS in generating these classes

   SASS mixins automate creating these reusable classes, saving time and keeping code neat.

3. Final Answer:

   To create small reusable classes that quickly arrange items with Flexbox -> Option D

4. Quick Check:

   Flexbox utility classes = reusable small classes [OK]

Hint: Think: reusable small classes for layout with Flexbox [OK]

Common Mistakes:

• Confusing utility classes with full component styles
• Thinking SASS disables Flexbox
• Assuming SASS converts Flexbox to grid automatically

2. Which SASS syntax correctly defines a mixin to generate a flex container with customizable direction?

easy

A. @mixin flex-container($direction) { display: flex; flex-direction: $direction; }

B. @function flex-container($direction) { display: flex; flex-direction: $direction; }

C. @include flex-container($direction) { display: flex; flex-direction: $direction; }

D. @extend flex-container($direction) { display: flex; flex-direction: $direction; }

Solution

1. Step 1: Identify correct SASS mixin syntax

   A mixin is defined with '@mixin name(parameters) { ... }'.

2. Step 2: Check options for correct usage

   @mixin flex-container($direction) { display: flex; flex-direction: $direction; } uses '@mixin' correctly; others use '@function', '@include', or '@extend' incorrectly for definition.

3. Final Answer:

   @mixin flex-container($direction) { display: flex; flex-direction: $direction; } -> Option A

4. Quick Check:

   Mixin definition uses '@mixin' [OK]

Hint: Define mixins with '@mixin', not '@function' or '@include' [OK]

Common Mistakes:

• Using '@function' instead of '@mixin' to define mixins
• Confusing '@include' (for using mixins) with defining them
• Trying to use '@extend' to create mixins

3. Given this SASS code, what CSS class will be generated for .flex-row-center?

@mixin flex-utility($direction, $justify) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
}

.flex-row-center {
  @include flex-utility(row, center);
}

medium

A. .flex-row-center { display: flex; flex-direction: row; justify-content: flex-start; }

B. .flex-row-center { display: block; flex-direction: row; justify-content: center; }

C. .flex-row-center { display: flex; flex-direction: row; justify-content: center; }

D. .flex-row-center { display: flex; flex-direction: column; justify-content: center; }

Solution

1. Step 1: Understand mixin parameters and usage

   The mixin sets display: flex, flex-direction, and justify-content from parameters.

2. Step 2: Substitute parameters for .flex-row-center

   Parameters are row and center, so flex-direction: row; justify-content: center.

3. Final Answer:

   .flex-row-center { display: flex; flex-direction: row; justify-content: center; } -> Option C

4. Quick Check:

   Parameters match CSS properties exactly [OK]

Hint: Match mixin parameters to CSS properties directly [OK]

Common Mistakes:

• Mixing up flex-direction values
• Forgetting display: flex
• Using wrong justify-content values

4. Identify the error in this SASS code for generating flex utility classes:

@mixin flex-align($align) {
  display: flex;
  align-items: $align
}

.flex-align-center {
  @include flex-align(center);
}

medium

A. Missing semicolon after 'align-items: $align' property

B. Incorrect mixin name 'flex-align' instead of 'flex-align-items'

C. Wrong property 'align-items' should be 'justify-content'

D. Mixin call '@include flex-align(center)' is invalid syntax

Solution

1. Step 1: Check CSS property syntax inside mixin

   CSS properties must end with a semicolon; here 'align-items: $align' misses it.

2. Step 2: Verify mixin usage and names

   Mixin name and call are correct; property name is valid for alignment.

3. Final Answer:

   Missing semicolon after 'align-items: $align' property -> Option A

4. Quick Check:

   CSS properties need semicolons [OK]

Hint: Always end CSS declarations with semicolons [OK]

Common Mistakes:

• Omitting semicolons after CSS properties
• Confusing align-items with justify-content
• Incorrect mixin call syntax

5. You want to generate utility classes for flex direction (row, column) and justify-content (start, center, end) using SASS loops. Which SASS code correctly creates classes like .flex-row-start and .flex-column-center?

hard

A. @mixin flex-utility($direction, $justify) { display: flex; flex-direction: $direction; justify-content: $justify; }

@for $i from 1 through 2 {
@for $j from 1 through 3 {
.flex-#{$i}-#{$j} {
@include flex-utility($i, $j);
}
}
}

B. @mixin flex-utility($direction, $justify) { display: flex; flex-direction: $direction; justify-content: $justify; }

@each $dir in (row, column) {
@each $just in (start, center, end) {
.flex-#{$dir}-#{$just} {
@include flex-utility($dir, $just);
}
}
}

C. @mixin flex-utility($direction, $justify) { display: flex; flex-direction: $direction; justify-content: $justify; }

@each $dir in (row, column) {
.flex-#{$dir} {
@include flex-utility($dir, center);
}
}

D. @mixin flex-utility($direction, $justify) { display: flex; flex-direction: $direction; justify-content: $justify; }

@each $just in (start, center, end) {
.flex-#{$just} {
@include flex-utility(row, $just);
}
}

Solution

1. Step 1: Understand the goal of generating combined classes

   We want classes combining direction and justify-content, e.g., .flex-row-start.

2. Step 2: Check each option for correct nested loops and class naming

   @mixin flex-utility($direction, $justify) { display: flex; flex-direction: $direction; justify-content: $justify; } @each $dir in (row, column) { @each $just in (start, center, end) { .flex-#{$dir}-#{$just} { @include flex-utility($dir, $just); } } } uses nested @each loops over directions and justifications, correctly generating combined class names and including the mixin with proper parameters.

3. Step 3: Identify why other options fail

   @mixin flex-utility($direction, $justify) { display: flex; flex-direction: $direction; justify-content: $justify; } @for $i from 1 through 2 { @for $j from 1 through 3 { .flex-#{$i}-#{$j} { @include flex-utility($i, $j); } } } uses numeric loops without mapping to direction names; C and D generate only partial combinations.

4. Final Answer:

   Nested @each loops generating .flex-#{$dir}-#{$just} classes -> Option B

5. Quick Check:

   Nested @each loops + interpolation = combined classes [OK]

Hint: Use nested @each loops with interpolation for combined classes [OK]

Common Mistakes:

• Using numeric loops without mapping to names
• Generating only partial class combinations
• Incorrect class name interpolation syntax