Recursive mixins in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a recursive mixin that decreases the value of $n by 1 each call.

SASS

@mixin countdown($n) {
  @if $n > 0 {
    @debug $n;
    @include countdown([1]);
  }
}

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

A$n - 1

B$n + 1

C$n / 1

D$n * 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of subtraction causes infinite recursion.

Multiplying or dividing by 1 does not change the value.

The mixin calls itself with $n decreased by 1 to count down recursively.

2fill in blank

medium

Complete the code to stop recursion when $n reaches zero.

SASS

@mixin countdown($n) {
  @if [1] {
    @debug $n;
    @include countdown($n - 1);
  }
}

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

A$n >= 0

B$n < 0

C$n > 0

D$n == 0

Attempts:

3 left

💡 Hint

Common Mistakes

Using $n == 0 causes no recursion at all.

Using $n < 0 causes infinite recursion.

The recursion continues only while $n is greater than zero.

3fill in blank

hard

Fix the error in the recursive mixin call to correctly pass the decremented value.

SASS

@mixin countdown($n) {
  @if $n > 0 {
    @debug $n;
    @include countdown([1]);
  }
}

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

A$n - 1

B$n + 1

C$n

Dn - 1

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the $ sign causes an undefined variable error.

Passing $n without decrement causes infinite recursion.

The mixin must call itself with $n decreased by 1 to progress the recursion.

4fill in blank

hard

Fill both blanks to create a recursive mixin that prints numbers from $start down to 1.

SASS

@mixin print-down($start) {
  @if [1] {
    @debug $start;
    @include print-down([2]);
  }
}

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

A$start > 0

B$start - 1

C$start >= 1

D$start + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using $start + 1 causes infinite recursion.

Using $start >= 1 is correct but less common than > 0.

The mixin continues while $start is greater than zero and calls itself with $start minus 1.

5fill in blank

hard

Fill all three blanks to create a recursive mixin that builds nested selectors up to $level.

SASS

@mixin nested($level, $max) {
  @if [1] {
    .level-#[2] {
      @include nested([3], $max);
    }
  }
}

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

A$level <= $max

B$level + 1

C$level

D$level < $max

Attempts:

3 left

💡 Hint

Common Mistakes

Using <= instead of < changes the number of nested levels.

Using $level - 1 causes infinite recursion or wrong nesting.

The mixin recurses while $level is less than $max, uses $level in the selector, and calls itself with $level + 1.