我想创建一个这样的结构
.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,......
谁能告诉我为什么?
最佳答案
我已经在 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 编译器正常工作。
关于css - Sass 循环 @mixin 和 @include,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52093832/