What is Flexbox utility class generation in SASS?

SASSmarkup~5 mins

Flexbox utility class generation in SASS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.