Bird
Raised Fist0
SASSmarkup~5 mins

Flexbox utility class generation in SASS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Flexbox utility classes help you quickly arrange items on a page without writing new CSS each time. They save time and keep your code neat.

You want to align items horizontally or vertically in a container.
You need to space items evenly or push some items to the edges.
You want to make a layout that adjusts nicely on different screen sizes.
You want to reuse simple layout styles across many parts of your website.
Syntax
SASS
@mixin flex-utility($property, $value) {
  .flex-#{$property}-#{$value} {
    display: flex;
    #{$property}: #{$value};
  }
}

This mixin creates a class with a flexbox property and value.

Use it to generate many small classes for different flexbox settings.

Examples
This creates a class .flex-justify-content-center that centers items horizontally.
SASS
@include flex-utility(justify-content, center);
This creates a class .flex-align-items-flex-start that aligns items to the top vertically.
SASS
@include flex-utility(align-items, flex-start);
This creates a class .flex-flex-direction-column that stacks items vertically.
SASS
@include flex-utility(flex-direction, column);
Sample Program

This example shows three blue boxes arranged in a row, centered horizontally and vertically inside a bordered container. The container uses the generated flexbox utility classes.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flexbox Utility Classes</title>
  <style>
    /* Generated by SASS mixin */
    .flex-justify-content-center {
      display: flex;
      justify-content: center;
    }
    .flex-align-items-center {
      display: flex;
      align-items: center;
    }
    .flex-flex-direction-row {
      display: flex;
      flex-direction: row;
    }
    .box {
      width: 4rem;
      height: 4rem;
      background-color: #4a90e2;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0.5rem;
      font-weight: bold;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <section class="flex-justify-content-center flex-align-items-center flex-flex-direction-row" style="height: 10rem; border: 2px solid #ccc;">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Utility classes keep your HTML clean and let you change layout by adding or removing classes.

Use semantic class names to make your code easier to understand.

Remember to test your layout on different screen sizes for responsiveness.

Summary

Flexbox utility classes help quickly arrange items using small reusable CSS classes.

You can generate these classes with a SASS mixin to save time and keep code neat.

Use these classes to align, justify, and direction items easily in your layouts.

Practice

(1/5)
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