SASS 函数迭代 nth-child(n+1) 和 lighten/darken($color, 5n%)

Question

我使用了很多SASS/SCSS，但通常不使用复杂任何功能。我当前的需求似乎是函数的完美用例，但不确定如何在 SASS/SCSS 中像这样循环。

我需要一个阶梯式颜色模式来更改每个附加列表项的背景颜色。

我需要用各种基色重复这个任务，我希望有人可以帮助提供一个简洁的 SASS/SCSS 函数来替换这个 SCSS 块，它将 li:nth-child() 递增 1 (n+1) 并为每个 li.

增加 5% (5n) background-color: lighten($color, 5%)

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

如果需要任何说明，请告诉我。非常感谢您的帮助和建议。

Answer 1

尝试以下操作：

$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 或最适合您的值。

Answer 2

我想你可以试试:

@for $i from 2 through 7 {
  li:nth-child(#{$i}) {
      background-color: lighten($color, ($i - 1) * 5%);
  }
}

Answer 3

试试这个：

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

SASS 函数迭代 nth-child(n+1) 和 lighten/darken($color, 5n%)

SASS function to iterate nth-child(n+1) and lighten/darken($color, 5n%)

css

function

sass

scss-mixins