我使用了很多SASS / SCSS,但通常不使用 complex 的任何功能。我当前的需求似乎是函数的完美用例,但不确定如何在SASS / SCSS中像这样循环。
我需要一种步进式颜色模式,该模式可以更改每个其他列表项的背景颜色。
我需要用各种基本颜色重复执行此任务,我希望有人可以提供简洁的SASS / SCSS函数来代替此SCSS块,从而使li:nth-child()
递增1(n + 1 ),并为每个background-color: lighten($color, 5%)
将li
增加5%(5n)。
.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%);
}
}
}
让我知道是否需要任何澄清。在此先感谢您的帮助和建议。
答案 0 :(得分:2)
尝试以下操作:
$alpha: 5;
$color: red;
@for $i from 1 through 4 {
li:nth-child(#{$i}) {
background-color: lighten($color, $alpha + 0%);
}
$alpha: $alpha + 5;
}
输出:
li:nth-child(1) {
background-color: #ff1a1a;
}
li:nth-child(2) {
background-color: #ff3333;
}
li:nth-child(3) {
background-color: #ff4d4d;
}
li:nth-child(4) {
background-color: #ff6666;
}
您只需将from
和trough
的值更改为2和7或最合适的值即可。
答案 1 :(得分:1)
我认为您可以尝试:
@for $i from 2 through 7 {
li:nth-child(#{$i}) {
background-color: lighten($color, ($i - 1) * 5%);
}
}
答案 2 :(得分:0)
尝试一下:
$colors: lighten(red, 5%), lighten(red, 10%), lighten(red, 15%), lighten(red, 20%);
@each $color in $colors {
$i: index($colors, $color);
li:nth-child(#{$i}) {
background-color: nth($color, 1);
}
}
输出类似:
li:nth-child(1) {
background-color: #ff1a1a;
}
li:nth-child(2) {
background-color: #ff3333;
}
li:nth-child(3) {
background-color: #ff4d4d;
}
li:nth-child(4) {
background-color: #ff6666;
}