0

我想创建一个这样的结构

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

这是我的 sass 代码

@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
      }
    }
  }
}

但是填充总是相同的(2rem)而不是 2rem, 3rem, 4rem, ....

有人可以告诉我为什么吗?

4

1 回答 1

1

我已经在https://www.sassmeister.com/中测试了您的代码,并且刚刚添加了 @include generatePadding(3); 最后。它的结果是:

.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;
}

一切似乎都很好。另外请确保您的 sass 编译器正常工作。

于 2018-08-30T19:30:53.310 回答