我使用了很多 SASS/SCSS,但通常不使用复杂的任何功能。我目前的需求似乎是一个函数的完美用例,但不确定如何在 SASS/SCSS 中像这样循环。
我需要一个阶梯式颜色模式来改变每个附加列表项的背景颜色。
我需要用各种基色重复这个任务,我希望有人可以帮助一个简洁的 SASS/SCSS 函数来替换这个 SCSS 块,它增加li:nth-child()
1 (n+1) 并增加background-color: lighten($color, 5%)
5% (5n ) 对于每个li
.
.service {
background-color: $color;
.list {
li:nth-child(2) {
background-color: lighten($color,5%);
}
li:nth-child(3) {
background-color: lighten($color,10%);
}
li:nth-child(4) {
background-color: lighten($color,15%);
}
li:nth-child(5) {
background-color: lighten($color,20%);
}
li:nth-child(6) {
background-color: lighten($color,25%);
}
li:nth-child(7) {
background-color: lighten($color,30%);
}
}
}
让我知道是否需要任何澄清。非常感谢您的帮助和建议。