Grid column generator with loops in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS loop?

Given the following SASS code, what CSS rule will be generated for .col-3?

SASS

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

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

B .col-3 { grid-column: 3; }

C .col-3 { grid-column: span 3; }

D .col-3 { grid-column: span $i; }

💡 Hint

Look at how the loop variable $i is used inside the selector and property.

The loop runs from 1 to 4, creating classes .col-1 to .col-4. For .col-3, the grid-column property is set to 'span 3'.

🧠 Conceptual

intermediate

How many CSS classes are generated by this SASS code?

Consider this SASS code snippet:

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

How many CSS classes will be generated?

A 6

B 5

C 7

D 4

💡 Hint

The loop runs from 1 through 6 inclusive.

The loop runs from 1 to 6, so it generates 6 classes: .grid-col-1 to .grid-col-6.

❓ selector

advanced

Which option correctly generates grid columns with a gap using SASS loops?

You want to create grid column classes with a gap of 1rem between columns. Which SASS code snippet correctly applies the gap only between columns, not after the last column?

A

@for $i from 1 through 4 {
  .col-#{$i} {
    grid-column: span $i;
    margin-right: 1rem;
  }
}

B

@for $i from 1 through 4 {
  .col-#{$i} {
    grid-column: span $i;
    margin-right: 1rem;
  }
  .col-4 {
    margin-right: 0;
  }
}

C

@for $i from 1 through 4 {
  .col-#{$i} {
    grid-column: span $i;
  }
  .col-#{$i}:last-child {
    margin-right: 0;
  }
}

D

@for $i from 1 through 4 {
  .col-#{$i}:not(:last-child) {
    margin-right: 1rem;
  }
  .col-#{$i} {
    grid-column: span $i;
  }
}

💡 Hint

Think about how to remove margin from the last column only.

Option D applies margin-right: 1rem to .col-#{$i}:not(:last-child) for each i, ensuring the gap only between columns and no margin after the last column regardless of its class.

❓ rendering

advanced

What visual layout results from this CSS grid with generated columns?

Given this CSS generated by SASS:

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

If you place three divs with classes col-1, col-2, and col-3 inside .grid-container, how will they be arranged?

A The first div takes 1 column, second takes 2 columns, third takes 3 columns, causing the third to wrap to next row.

B All divs fit in one row because grid-template-columns allows infinite columns.

C The divs overlap because grid-column spans exceed total columns.

D The divs stack vertically ignoring grid-column spans.

💡 Hint

Remember the container has 4 equal columns and spans add up to more than 4.

The container has 4 columns. The first div spans 1 column, second spans 2 columns (total 3), the third spans 3 columns which doesn't fit in remaining 1 column space, so it wraps to next row.

❓ accessibility

expert

Which approach improves accessibility when generating grid columns with SASS loops?

You generate grid column classes with SASS loops for a responsive layout. Which option best improves accessibility for keyboard users and screen readers?

A Add <code>tabindex="0"</code> to all grid items so they are focusable.

B Use semantic HTML elements inside grid items and add <code>aria-label</code> describing content.

C Add <code>role="grid"</code> to container and <code>role="gridcell"</code> to each grid item.

D Use only <code>div</code> elements with no ARIA roles or labels for simplicity.

💡 Hint

Think about semantic meaning and meaningful labels for assistive technologies.

Using semantic HTML and meaningful ARIA labels helps screen readers understand content. Adding tabindex to all items can cause confusing tab stops. Roles should match actual grid semantics only if appropriate.

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