Sass loop @mixin and @include

Question

I want to create a structure like this

    .nav-dropdown-items {
      .nav-link {
        padding-left: 1rem;
         .nav-dropdown-items {
           .nav-link {
              padding-left: 2rem;
              .....
            }
         }
      }
   }

This is my sass code

@mixin generatePadding($counter, $i:1){
  @debug $i;
  @debug $counter;
  .nav-dropdown-items {
    .nav-link {
      padding-left: 1rem + $i;
      @if $i < $counter {
        @debug "include";
        @include generatePadding($counter, ($i+1)); // next iteration
      }
    }
  }
}

But the padding is always the same(2rem) instead 2rem, 3rem, 4rem, ....

Someone can tell me why?

At the end @include generatePadding(5); – Irrech Aug 30 '18 at 09:46 — Irrech, Aug 30 '18 at 09:46

score 1 · Answer 1 · answered Aug 30 '18 at 19:30

I have tested your code in https://www.sassmeister.com/ and just added @include generatePadding(3); at the end of it. It's result is:

.nav-dropdown-items .nav-link {
  padding-left: 2rem;
}
.nav-dropdown-items .nav-link .nav-dropdown-items .nav-link {
  padding-left: 3rem;
}
.nav-dropdown-items .nav-link .nav-dropdown-items .nav-link .nav-dropdown-items .nav-link {
  padding-left: 4rem;
}

Everything seems to be good. Also please make sure your sass compiler work properly.

Sass loop @mixin and @include

1 Answers1