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

Posted 2023-03-16

【中文标题】使用 @each 的 nth-child 自动增量 - SASS

【英文标题】：nth-child autoincrement with @each - SASS

【发布时间】：2021-05-27 19:28:17

【问题描述】：

是否可以自动增加第 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;

谢谢！

【参考方案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;
    
 

【讨论】：

Newby 问题：使用@for 结构会怎样？这样更好吗？

@TheJoker 你已经在一个 for 结构中，所以你不能再添加一个