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以获取控制指令。

SASS循环遍历未知数量的元素

1 个答案: