Flexbox utility class generation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of Flexbox utility classes in CSS?

Flexbox utility classes help quickly apply common flexbox properties like layout direction, alignment, and spacing without writing custom CSS each time.

intermediate

In Sass, how can you generate multiple utility classes for flexbox properties efficiently?

You can use Sass loops like @each or @for to create classes dynamically by iterating over lists or maps of property values.

beginner

What does the following Sass snippet do? @each $dir in row, column { .flex-#{$dir} { display: flex; flex-direction: $dir; } }

It creates two classes: .flex-row and .flex-column. Each sets display to flex and flex-direction to row or column respectively.

beginner

Why is it helpful to generate flexbox utility classes with Sass instead of writing each class manually?

It saves time, reduces errors, and keeps code consistent and easy to update by changing values in one place.

beginner

Name three common flexbox properties you might include in utility classes.

flex-direction, justify-content, align-items

Which Sass directive is best for creating multiple similar flexbox utility classes?

A @each

B @if

C @mixin

D @extend

@each lets you loop over a list of values to generate classes for each flexbox property variation.

What CSS property does the class .flex-row typically set?

A flex-direction: row

B justify-content: center

C align-items: flex-start

D display: block

.flex-row sets flex-direction to row to arrange items horizontally.

Why use utility classes for flexbox instead of writing styles inline or in separate CSS rules?

A They increase CSS file size unnecessarily

B They only work in old browsers

C They prevent responsive design

D They allow quick reuse and consistent styling across the site

Utility classes promote reuse and consistency, making styling faster and easier.

Which Sass feature helps keep utility class code DRY (Don't Repeat Yourself)?

A Variables only

B Loops like @each

C Comments

D Plain CSS

Loops let you write code once and generate many classes, avoiding repetition.

What is the visual effect of applying .flex-center utility class that sets justify-content and align-items to center?

A Items overflow outside the container

B Items are aligned to the left

C Items are centered horizontally and vertically inside the container

D Items stack vertically with space between

Centering both horizontally and vertically aligns items in the middle of the flex container.

Explain how you would use Sass to generate utility classes for flexbox directions and alignments.

Think about looping over lists of property values and combining them into class names.

Describe the benefits of using flexbox utility classes generated by Sass in a web project.

Consider how utility classes improve workflow and code quality.