使用 @each 的 nth-child 自动增量 - SASS

Question

是否可以自动增加第 n 个孩子的值？我尝试使用@for 没有成功:(

这是代码：

 $color1: #F700FF;
 $color2: #0074FF;
 $color3: #68FF00;
    
 $colorMap: (
    c1: $color1,
    c2: $color2,
    c3: $color3,
 );
    
 @each $key, $value in $colorMap {
    .card:nth-child(1) .card_content {
        background-color: $value;
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
    }
 }

结果如下：

.card:nth-child(1) .card_content {
  background-color: #F700FF;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}

.card:nth-child(1) .card_content {
  background-color: #0074FF;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}

.card:nth-child(1) .card_content {
  background-color: #68FF00;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}

谢谢！

Answer 1

使用你递增的变量

 $color1: #F700FF;
 $color2: #0074FF;
 $color3: #68FF00;
    
 $colorMap: (
    c1: $color1,
    c2: $color2,
    c3: $color3,
 );
   
 $i:1; 
 @each $key, $value in $colorMap {
    .card:nth-child(#{$i}) .card_content {
        background-color: $value;
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
    }
    $i:$i+1;
 }

或使用index()

 $color1: #F700FF;
 $color2: #0074FF;
 $color3: #68FF00;
    
 $colorMap: (
    c1: $color1,
    c2: $color2,
    c3: $color3,
 );
   
 @each $key, $value in $colorMap {
    .card:nth-child(#{index($colorMap, $key $value)}) .card_content {
        background-color: $value;
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
    }
 }