Recursive mixins in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does this recursive mixin output?

Consider this Sass recursive mixin that generates nested selectors. What CSS does it produce when called with @include nest(2);?

SASS

@mixin nest($level) {
  @if $level > 0 {
    .level-#{$level} {
      color: red;
      @include nest($level - 1);
    }
  }
}

A

.level-2 { color: red; }
.level-2 .level-1 { color: red; }
.level-1 { color: red; }

B

.level-2 { color: red; }
.level-2 .level-1 { color: red; }

C

.level-2 { color: red; }
.level-1 { color: red; }

D

.level-1 { color: red; }
.level-2 { color: red; }

💡 Hint

Think about how nested selectors combine in Sass when mixins call themselves inside a selector block.

The mixin nests the selectors inside each other. Calling @include nest(2) creates .level-2 with color red, then inside it nests .level-1 with color red, resulting in .level-2 .level-1 { color: red; }.

📝 Syntax

intermediate

Which option causes a syntax error in this recursive mixin?

Given this recursive mixin, which option will cause a syntax error when compiled?

SASS

@mixin countdown($n) {
  @if $n > 0 {
    .num-#{$n} {
      content: "#{$n}";
      @include countdown($n - 1);
    }
  }
}

A @include countdown();

B @include countdown(3);

C @include countdown(0);

D @include countdown(-1);

💡 Hint

Check if the mixin call provides the required argument.

The mixin requires one argument $n. Calling @include countdown() without an argument causes a syntax error.

❓ rendering

advanced

What is the rendered CSS output of this recursive mixin?

What CSS does this Sass code produce?

SASS

@mixin box-shadow-recursive($count) {
  @if $count > 0 {
    box-shadow: 0 0 #{$count}px rgba(0,0,0,0.1);
    @include box-shadow-recursive($count - 1);
  }
}

.box {
  @include box-shadow-recursive(2);
}

A

.box {
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

B

.box {
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

C

.box {
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

D

.box {
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

💡 Hint

Remember that later box-shadow properties override earlier ones unless combined.

Each recursive call adds a box-shadow property. Sass outputs them in order, so the first is 2px, then 1px. The last box-shadow overrides the previous, so only the last applies visually, but both appear in CSS.

❓ selector

advanced

Which option correctly generates nested selectors with recursive mixin?

This recursive mixin generates nested ul and li selectors. Which option shows the correct CSS output for @include nested-list(2);?

SASS

@mixin nested-list($depth) {
  @if $depth > 0 {
    ul {
      li {
        color: blue;
        @include nested-list($depth - 1);
      }
    }
  }
}

A

ul li {
  color: blue;
  ul li {
    color: blue;
  }
}

B

ul li {
  color: blue;
}
ul li li {
  color: blue;
}

C

ul li {
  color: blue;
}
ul li ul li {
  color: blue;
}

D

ul {
  li {
    color: blue;
  }
}
ul {
  li {
    color: blue;
  }
}

💡 Hint

Think about how nested selectors combine in Sass when mixins call themselves inside nested blocks.

The mixin nests ul > li, then inside li nests ul > li again, producing ul li and ul li ul li selectors with color blue.

❓ accessibility

expert

How can recursive mixins help improve accessibility in CSS?

Which of these is a valid way recursive mixins can be used to enhance accessibility in a web project?

A Recursively generating focus styles for nested interactive elements to ensure keyboard users see clear outlines.

B Automatically hiding all nested elements recursively to reduce visual clutter without user control.

C Recursively increasing font size on all nested elements regardless of user preferences.

D Using recursion to remove all ARIA attributes from nested elements to simplify markup.

💡 Hint

Think about how recursive styles can help users who navigate with keyboard.

Recursive mixins can apply consistent focus outlines on nested interactive elements, improving keyboard navigation visibility and accessibility.