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.

Practice

1. What is the main purpose of a recursive mixin in sass?

easy

A. To call itself repeatedly to apply styles multiple times

B. To import external CSS files

C. To define variables for colors

D. To create animations with keyframes

Solution

1. Step 1: Understand what recursion means in programming

   Recursion means a function or mixin calls itself to repeat an action.

2. Step 2: Apply this to sass mixins

   A recursive mixin calls itself to repeat styles multiple times, often with changes each time.

3. Final Answer:

   To call itself repeatedly to apply styles multiple times -> Option A

4. Quick Check:

   Recursive mixin = repeated self-call [OK]

Hint: Recursive mixins repeat styles by calling themselves [OK]

Common Mistakes:

• Confusing recursion with importing files
• Thinking mixins only define variables
• Mixing up animations with recursion

2. Which of the following is the correct syntax to define a recursive mixin in sass?

easy

A. @mixin repeat($n) { color: red; @include repeat($n + 1); }

B. @mixin repeat($n) { @if $n > 0 { color: red; @include repeat($n - 1); } }

C. @mixin repeat { @include repeat; }

D. @mixin repeat($n) { @if $n < 0 { @include repeat($n - 1); } }

Solution

1. Step 1: Check for stop condition in mixin

   @mixin repeat($n) { @if $n > 0 { color: red; @include repeat($n - 1); } } uses @if $n > 0 to stop recursion when $n reaches 0.

2. Step 2: Verify recursive call decreases $n

   @mixin repeat($n) { @if $n > 0 { color: red; @include repeat($n - 1); } } calls itself with $n - 1, moving towards stop condition.

3. Final Answer:

   @mixin repeat($n) { @if $n > 0 { color: red; @include repeat($n - 1); } } -> Option B

4. Quick Check:

   Stop condition + decrement = correct recursion [OK]

Hint: Look for stop condition and decrement in recursive mixin [OK]

Common Mistakes:

• Missing stop condition causing infinite loop
• Incrementing instead of decrementing parameter
• Calling mixin without parameters

3. Given the following recursive mixin, what will be the color of the text inside .box after compilation?

@mixin colorLayers($n) {
  @if $n > 0 {
    color: lighten(blue, $n * 10%);
    @include colorLayers($n - 1);
  }
}

.box {
  @include colorLayers(2);
}

medium

A. The text color will be pure blue

B. There will be a syntax error and no color applied

C. The text color will be dark blue

D. The text color will be a light blue shade (lightened twice)

Solution

1. Step 1: Understand the recursion steps

   The mixin calls itself twice: first with $n=2, then $n=1, then stops at 0.

2. Step 2: Analyze color changes

   Each call applies color: lighten(blue, $n * 10%). So first lighten by 20%, then by 10%.

3. Final Answer:

   The text color will be a light blue shade (lightened twice) -> Option D

4. Quick Check:

   Recursive lighten steps = light blue [OK]

Hint: Trace recursive calls and their style effects stepwise [OK]

Common Mistakes:

• Assuming only one color applied
• Ignoring recursive layering of styles
• Thinking recursion causes error here

4. Identify the error in this recursive mixin and choose the fix:

@mixin borderLayers($count) {
  border: 1px solid black;
  @include borderLayers($count - 1);
}

medium

A. Missing stop condition; add @if $count > 0 before recursive call

B. Wrong parameter name; change $count to $n

C. Use @extend instead of @include

D. No error; code is correct

Solution

1. Step 1: Check for stop condition

   The mixin calls itself without any condition, causing infinite recursion.

2. Step 2: Fix by adding stop condition

   Adding @if $count > 0 before recursive call stops recursion when count reaches 0.

3. Final Answer:

   Missing stop condition; add @if $count > 0 before recursive call -> Option A

4. Quick Check:

   Stop condition prevents infinite recursion [OK]

Hint: Always add stop condition to recursive mixins [OK]

Common Mistakes:

• Forgetting stop condition
• Confusing @include with @extend
• Changing parameter names unnecessarily

5. You want to create a recursive mixin that adds nested box shadows with increasing blur. Which of these mixins correctly applies 3 layers of shadows with blur increasing by 2px each time?

hard

A. @mixin shadowLayers($n, $blur: 2) { @if $n < 0 { box-shadow: 0 0 #{$blur}px rgba(0,0,0,0.3); @include shadowLayers($n + 1, $blur + 2); } }

B. @mixin shadowLayers($n) { box-shadow: 0 0 2px rgba(0,0,0,0.3); @include shadowLayers($n - 1); }

C. @mixin shadowLayers($n, $blur: 2) { @if $n > 0 { box-shadow: 0 0 #{$blur}px rgba(0,0,0,0.3); @include shadowLayers($n - 1, $blur + 2); } }

D. @mixin shadowLayers($n, $blur: 2) { box-shadow: 0 0 #{$blur}px rgba(0,0,0,0.3); }

Solution

1. Step 1: Check for stop condition and parameter updates

   @mixin shadowLayers($n, $blur: 2) { @if $n > 0 { box-shadow: 0 0 #{$blur}px rgba(0,0,0,0.3); @include shadowLayers($n - 1, $blur + 2); } } has @if $n > 0 to stop recursion and increments blur by 2 each call.

2. Step 2: Verify recursive call and shadow layering

   @mixin shadowLayers($n, $blur: 2) { @if $n > 0 { box-shadow: 0 0 #{$blur}px rgba(0,0,0,0.3); @include shadowLayers($n - 1, $blur + 2); } } calls itself with $n - 1 and increasing blur, layering shadows correctly 3 times.

3. Final Answer:

   @mixin shadowLayers($n, $blur: 2) { @if $n > 0 { box-shadow: 0 0 #{$blur}px rgba(0,0,0,0.3); @include shadowLayers($n - 1, $blur + 2); } } -> Option C

4. Quick Check:

   Stop condition + parameter increment = correct recursive layering [OK]

Hint: Use stop condition and increment parameters in recursion [OK]

Common Mistakes:

• No stop condition causing infinite recursion
• Wrong comparison operator in stop condition
• Not incrementing blur value each recursion