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:

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

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.

Practice

1. What does the @for loop in SASS help you do when creating grid columns?

easy

A. Add images to grid columns

B. Create JavaScript functions for grid behavior

C. Write HTML grid elements faster

D. Generate multiple CSS classes for different column widths automatically

Solution

1. Step 1: Understand the purpose of @for in SASS

   The @for loop repeats code blocks a set number of times, useful for generating CSS classes.

2. Step 2: Connect @for with grid columns

   Using @for, you can create many classes like .col-1, .col-2, etc., each with different widths.

3. Final Answer:

   Generate multiple CSS classes for different column widths automatically -> Option D

4. Quick Check:

   @for loop = Generate CSS classes [OK]

Hint: Think of @for as a shortcut to write many classes fast [OK]

Common Mistakes:

• Confusing SASS loops with JavaScript loops
• Thinking @for writes HTML elements
• Assuming it adds images or content

2. Which of the following is the correct SASS syntax to create a loop from 1 to 4 for grid columns?

easy

A. @each $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } }

B. @for $i in 1 to 4 { .col-#{$i} { width: 25% * $i; } }

C. @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } }

D. @loop $i from 1 to 4 { .col-#{$i} { width: 25% * $i; } }

Solution

1. Step 1: Recall correct @for syntax in SASS

   The correct syntax uses @for $var from start through end to include the end number.

2. Step 2: Check each option

   @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } } uses @for $i from 1 through 4, which is correct. Options A, B, and C use invalid keywords or syntax.

3. Final Answer:

   @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } } -> Option C

4. Quick Check:

   Correct @for syntax = @for $i from 1 through 4 { .col-#{$i} { width: 25% * $i; } } [OK]

Hint: Remember: use 'from' and 'through' for inclusive loops in SASS [OK]

Common Mistakes:

• Using 'in' instead of 'from' and 'through'
• Using '@loop' which is not valid SASS
• Confusing '@each' with '@for'

3. Given this SASS code:

@for $i from 1 through 3 {
  .col-#{$i} {
    grid-column: span $i;
  }
}

What CSS will be generated?

medium

A. .col-1 { grid-column: span 3; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 1; }

B. .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }

C. .col-1 { grid-column: 1; } .col-2 { grid-column: 2; } .col-3 { grid-column: 3; }

D. Syntax error, no CSS generated

Solution

1. Step 1: Understand the loop iterations

   The loop runs for $i = 1, 2, 3, creating classes .col-1, .col-2, .col-3.

2. Step 2: Check the property values

   Each class sets grid-column: span $i;, so .col-1 spans 1 column, .col-2 spans 2, and .col-3 spans 3.

3. Final Answer:

   .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } -> Option B

4. Quick Check:

   Loop variable $i matches span value [OK]

Hint: Match loop variable to property value inside the loop [OK]

Common Mistakes:

• Confusing 'span $i' with just '$i'
• Reversing the span values
• Assuming syntax error due to interpolation

4. Identify the issue in this SASS code for generating grid columns from 1 to 4:

@for $i from 1 to 4 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

medium

A. Using 'to' instead of 'through' in the loop range

B. Missing interpolation in class name

C. Division inside width property is invalid

D. Loop variable $i is not declared

Solution

1. Step 1: Check the loop syntax

   The loop uses @for $i from 1 to 4, which excludes the end number 4. Use through to include it.

2. Step 2: Verify other parts

   Class name uses interpolation correctly. Division in width is valid in SASS. Loop variable is declared.

3. Final Answer:

   Using 'to' instead of 'through' in the loop range -> Option A

4. Quick Check:

   Loop range must use 'through' for inclusive end [OK]

Hint: Use 'through' to include last number in @for loops [OK]

Common Mistakes:

• Using 'to' which excludes the last number
• Forgetting interpolation in class names
• Thinking division in width is invalid

5. You want to create grid column classes from 1 to 6, but only for even numbers, using SASS loops. Which code correctly generates classes .col-2, .col-4, and .col-6 with widths as fractions of 6 columns?

hard

A. @for $i from 2 through 6 {
@if $i % 2 == 0 {
.col-#{$i} {
width: (100% / 6) * $i;
}
}
}

B. @for $i from 1 through 6 {
@if $i / 2 == 0 {
.col-#{$i} {
width: (100% / 6) * $i;
}
}
}

C. @each $i from (2, 4, 6) {
.col-#{$i} {
width: (100% / 6) * $i;
}
}

D. @for $i from 2 to 6 step 2 {
.col-#{$i} {
width: (100% / 6) * $i;
}
}

Solution

1. Step 1: Understand how to loop only even numbers

   SASS @for loops do not support 'step' directly, so use @if $i % 2 == 0 to filter even numbers.

2. Step 2: Check each option

   @for $i from 2 through 6 { @if $i % 2 == 0 { .col-#{$i} { width: (100% / 6) * $i; } } } uses @if $i % 2 == 0 correctly. @for $i from 1 through 6 { @if $i / 2 == 0 { .col-#{$i} { width: (100% / 6) * $i; } } } uses division instead of modulo, which is wrong. @each $i from (2, 4, 6) { .col-#{$i} { width: (100% / 6) * $i; } } uses invalid syntax ('from' instead of 'in' for @each). @for $i from 2 to 6 step 2 { .col-#{$i} { width: (100% / 6) * $i; } } uses invalid 'step' syntax.

3. Final Answer:

   @for $i from 2 through 6 { @if $i % 2 == 0 { .col-#{$i} { width: (100% / 6) * $i; } } } -> Option A

4. Quick Check:

   Use modulo (%) to filter even numbers in loops [OK]

Hint: Use modulo (%) inside @if to pick even numbers in @for loops [OK]

Common Mistakes:

• Using division (/) instead of modulo (%) for condition
• Trying to use 'step' in @for which is invalid
• Confusing @each with @for loops