Css Sass循环@mixin和@include
我想创建一个这样的结构Css Sass循环@mixin和@include,css,loops,sass,scss-mixins,Css,Loops,Sass,Scss Mixins,我想创建一个这样的结构 .nav-dropdown-items { .nav-link { padding-left: 1rem; .nav-dropdown-items { .nav-link { padding-left: 2rem; ..... } } } } 这是我的sass代码 @mixin g
.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
有人能告诉我为什么吗?我在中测试了您的代码,并添加了@include generatePadding3;最后。其结果是:
.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编译器工作正常。最后@include generatePadding5;