Recursive mixins in SASS - Mini Project: Build & Apply

Creating a Recursive Mixin in Sass

📖 Scenario: You want to create a Sass mixin that applies a style recursively to nested elements. This is useful for styling nested lists or menus where each level has a different indentation or color shade.

🎯 Goal: Build a recursive Sass mixin called nested-indent that adds left padding increasing by 1rem for each nested level up to a maximum depth.

📋 What You'll Learn

Create a Sass variable $max-level to limit recursion depth.

Write a recursive mixin nested-indent that takes a parameter $level.

Apply left padding of 1rem multiplied by $level to the current element.

Call the mixin recursively for child ul elements, increasing $level by 1.

Stop recursion when $level exceeds $max-level.

💡 Why This Matters

🌍 Real World

Recursive mixins help style nested menus, lists, or components where each level needs a slightly different style, such as indentation or color shading.

💼 Career

Understanding recursive mixins is useful for front-end developers working with Sass to create scalable and maintainable CSS for complex nested structures.

1

Set up the maximum recursion depth variable

Create a Sass variable called $max-level and set it to 3.

SASS

# Your code here

Need a hint?

Use $max-level: 3; to define the maximum depth.

2

Start the recursive mixin with a level parameter

Write a mixin called nested-indent that takes a parameter $level. Inside it, apply padding-left of #{1rem * $level} to the current element.

SASS

$max-level: 3;

// Your code here

Need a hint?

Use @mixin nested-indent($level) and inside set padding-left: #{1rem * $level};.

3

Add recursion to the mixin for nested ul elements

Inside the nested-indent mixin, add a conditional that checks if $level is less than $max-level. If true, recursively call nested-indent with $level + 1 for nested ul elements.

SASS

$max-level: 3;

@mixin nested-indent($level) {
  padding-left: #{1rem * $level};
  // Your code here
}

Need a hint?

Use @if $level < $max-level to check depth, then inside ul call @include nested-indent($level + 1);.

4

Use the recursive mixin starting at level 1

Apply the nested-indent mixin to nav ul starting with $level set to 1.

SASS

$max-level: 3;

@mixin nested-indent($level) {
  padding-left: #{1rem * $level};
  @if $level < $max-level {
    ul {
      @include nested-indent($level + 1);
    }
  }
}

// Your code here

Need a hint?

Use nav ul { @include nested-indent(1); } to start the recursive styling.