Spacing utility generation in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of spacing utilities in CSS?

Spacing utilities help quickly add consistent margin or padding to elements without writing custom CSS each time.

beginner

How can Sass variables improve spacing utility generation?

Sass variables store spacing values so you can reuse and update them easily across all utilities.

intermediate

What Sass feature allows you to create multiple spacing classes from a list of values?

Using Sass loops like @each lets you generate many classes dynamically from a list or map of spacing sizes.

beginner

Explain the difference between margin and padding utilities.

Margin utilities add space outside an element, separating it from others. Padding utilities add space inside an element, between content and border.

intermediate

Why is it important to use semantic class names for spacing utilities?

Semantic class names like .m-1 or .p-2 clearly describe the spacing type and size, making code easier to read and maintain.

Which Sass directive is best for generating multiple spacing utility classes from a list?

A @if

B @each

C @import

D @mixin

@each loops through lists or maps to create multiple classes efficiently.

What does the class .p-3 usually represent in spacing utilities?

A Padding with size 3

B Margin with size 3

C Position fixed

D Padding with size 0.3rem

.p-3 means padding of size 3 units (defined by your spacing scale).

Why use Sass variables for spacing values?

A To write inline styles

B To make CSS slower

C To avoid using loops

D To reuse and update spacing sizes easily

Variables let you change spacing in one place and update all utilities automatically.

Which CSS property adds space inside an element between content and border?

A padding

B margin

C border-spacing

D gap

Padding adds space inside the element around its content.

What is a benefit of generating spacing utilities with Sass loops?

A Slower page load

B More manual CSS writing

C Less repetitive code and consistent spacing classes

D No need for variables

Loops automate class creation, saving time and ensuring consistency.

Describe how you would create a set of margin utilities using Sass.

Think about how to reuse values and loop through them.

Explain the difference between margin and padding and why both are important in spacing utilities.

Consider how spacing affects element separation and content spacing.