Grid column generator with loops in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using loops in a Sass grid column generator?

Loops in Sass help create multiple grid column classes automatically, saving time and avoiding repetitive code.

beginner

How do you write a basic @for loop in Sass?

You write it like this:<br>

@for $i from 1 through 4 {<br>  .col-#{$i} {<br>    width: 100% / 4 * $i;<br>  }<br>}

beginner

What does #{$i} do inside a Sass loop?

It inserts the current loop number into the class name or property, making each class unique like <code>.col-1</code>, <code>.col-2</code>, etc.

beginner

Why is using a grid column generator with loops better than writing each column class manually?

It reduces errors, saves time, and makes your code easier to update and maintain.

beginner

What CSS property is commonly used to set the width of grid columns in a generator?

The width property is used to set how wide each column should be, often calculated as a fraction of the total grid width.

In Sass, which directive is used to create a loop for generating grid columns?

A @for

B @if

C @while

D @each

The @for directive is used to loop through a range of numbers, perfect for generating grid columns.

What does through mean in @for $i from 1 through 4?

A Starts at 0

B Stops before 4

C Includes 4 in the loop

D Loops infinitely

through means the loop includes the last number, so it runs for 1, 2, 3, and 4.

How do you insert the loop variable into a class name in Sass?

A @{$i}

B #{$i}

C $i

D ${i}

Use #{$i} for string interpolation to insert the variable value inside selectors or property names.

If you want 12 equal grid columns, what width should each column have?

A 8.33%

B 12%

C 10%

D 6.25%

Each column is 100% divided by 12, which is about 8.33% width.

Which CSS property is typically used to control the size of grid columns generated by Sass loops?

A height

B padding

C margin

D width

The width property sets how wide each grid column is.

Explain how to create a grid column generator using a Sass loop.

Think about how to repeat similar CSS rules with different numbers.

Why is using loops in Sass helpful when building grid systems?

Consider how writing many similar classes manually can be tedious.