Offset class generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple offset class with a left margin.

SASS

.offset-1 {
  margin-[1]: 1rem;
}

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

Aleft

Bright

Ctop

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin-right instead of margin-left

Using margin-top or margin-bottom which move element vertically

The margin-left property moves the element to the right by adding space on the left side.

2fill in blank

medium

Complete the Sass loop to generate offset classes from 1 to 4.

SASS

@for $i from 1 through 4 {
  .offset-#[1] {
    margin-left: #{$i}rem;
  }
}

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

Acount

B$i

Cindex

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dollar sign in variable names

Using plain variable names without interpolation

In Sass, variables start with $. So $i is used inside the loop.

3fill in blank

hard

Fix the error in the Sass code to generate offset classes with correct margin values.

SASS

@for $n from 1 through 3 {
  .offset-#[1] {
    margin-left: $nrem;
  }
}

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

Ai

B$i

Cn

D$n

Attempts:

3 left

💡 Hint

Common Mistakes

Not interpolating the variable in the class name

Writing units separated by space from the variable

The variable $n must be interpolated inside the class name and used correctly with units in the property.

4fill in blank

hard

Fill both blanks to create offset classes with margin-left in rem units using a Sass loop.

SASS

@for $x from 1 through 5 {
  .offset-#[1] {
    margin-left: $x[2];
  }
}

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

A$x

Brem

Cpx

Dem

Attempts:

3 left

💡 Hint

Common Mistakes

Using px or em units instead of rem

Not interpolating the variable in the class name

The class name uses #{$x} to insert the number. The margin-left uses rem units for spacing.

5fill in blank

hard

Fill all three blanks to generate offset classes with margin-left in rem units and add a hover effect changing margin to zero.

SASS

@for $num from 1 through 3 {
  .offset-#[1] {
    margin-left: $num[2];
    &:hover {
      margin-left: [3];
    }
  }
}

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

A$num

Brem

C0

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' instead of '0' for margin-left

Not interpolating the variable in the class name

Forgetting units for margin-left

The class name uses #{$num}. Margin-left uses rem units. On hover, margin-left resets to 0 to remove offset.