Grid column generator with loops in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a loop from 1 to 4.

SASS

@for $i from 1 [1] 4 {
  .col-#{$i} {
    width: 25%;
  }
}

Drag options to blanks, or click blank then click option'

Ato

Bthrough

Cuntil

Dupto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'through' includes the last number, which is not intended here.

Using 'until' or 'upto' are not valid Sass keywords.

In Sass, the @for loop uses 'to' to loop up to but not including the end number.

2fill in blank

medium

Complete the code to set the width of each column as a fraction of 12.

SASS

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

Drag options to blanks, or click blank then click option'

A$width

B12

C100

D$i

Attempts:

3 left

💡 Hint

Common Mistakes

Using 12 or 100 directly instead of the loop variable.

Using an undefined variable like $width.

We use $i to calculate the width fraction for each column in the loop.

3fill in blank

hard

Fix the error in the loop keyword to include the last number.

SASS

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

Drag options to blanks, or click blank then click option'

Ato

Buntil

Cthrough

Dupto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' excludes the last number, causing missing styles.

Using invalid keywords like 'until' or 'upto'.

Use 'through' to include the last number in the loop in Sass.

4fill in blank

hard

Fill both blanks to create a grid with 12 columns and set width accordingly.

SASS

@for $i from 1 [1] [2] {
  .col-#{$i} {
    width: ( $i / 12 ) * 100%;
  }
}

Drag options to blanks, or click blank then click option'

Athrough

Bto

C12

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' excludes the last number 12.

Using 4 instead of 12 for total columns.

Use 'through' to include the last number and 12 as the total columns count.

5fill in blank

hard

Fill all three blanks to generate grid columns with dynamic width and class names.

SASS

@for $[1] from 1 [2] [3] {
  .col-#{$i} {
    width: ( $i / 12 ) * 100%;
  }
}

Drag options to blanks, or click blank then click option'

Ai

Bthrough

C12

Dj

Attempts:

3 left

💡 Hint

Common Mistakes

Using $j instead of $i causes mismatch in class names.

Using 'to' excludes the last number 12.

Use $i as the loop variable, 'through' for inclusive loop, and 12 for total columns.