SASS循环遍历未知数量的元素[重复]

Question

当元素数量未知时，我想使用 Sass 循环遍历 x 个元素。我不确定这是否可能，所以我想问人们是否可以查看下面的两个案例，并提供一些关于如何（如果）完成它们的见解。

首先，我想做这样的事情：

@each $slide in $slides {
  #slide-right#{$i} {
    left: 1px;
  }
}

输出类似：

#slide-right0 {
  left: 1px;
}
#slide-right1 {
  left: 1px;
}
#slide-right2 {
  left: 1px;
}

...等等。

其次，为了代码简洁，我想把下面的 CSS 变成某种循环：

#slide0 {
  order: 1;
  -webkit-order: 1;
  -ms-flex-order: 1;
}
#slide-right0 {
  order: 2;
  -webkit-order: 2;
  -ms-flex-order: 2;
}
#slide1 {
  order: 3;
  -webkit-order: 3;
  -ms-flex-order: 3;
}
#slide-right1 {
  order: 4;
  -webkit-order: 4;
  -ms-flex-order: 4;
}

...等等。

基本上：

#slide0 得到 1 的顺序

#slide1 得到 3 个订单

...等等。 （所有单数）

和

#slide-right0 得到 2 的顺序

#slide-right1得到4的顺序

...等等。 （所有偶数订单号）

可以设置一个循环来处理 12 张幻灯片吗？未知数量的幻灯片怎么样？

只是想看看是否有 Sass 方法可以做到这一点。任何和所有提示都表示赞赏！

Answer 1

这应该可以满足您的需求：

$startIndex: 0;
$numSlides: 12;
$order: 0;

@for $i from $startIndex through $numSlides {

  #slide-right#{$i} {
    left: 1px;
  }

}

@for $i from $startIndex through $numSlides {

  $order: $order + 1;

  #slide#{$i} {
    order: #{$order};
    -webkit-order: #{$order};
    -ms-flex-order: #{$order};
  }

  $order: $order + 1;

  #slide-right#{$i} {
    order: #{$order};
    -webkit-order: #{$order};
    -ms-flex-order: #{$order};
  }

}

您可以复制此代码并在sassmeister 中运行以查看输出。

查看sass cheatsheet 了解控制指令。