Question

我有一个div循环，我希望说24个div的序列如下：

红色＆gt;橙色＆gt;黄色＆gt;绿色＆gt;绿色＆gt;黄色＆gt;橙色＆gt;红色...并重复。

所以基本上它可以在很多8个工作，然后4种颜色然后反转它们的颜色。在网上搜索之后，我遇到了这个代码，这个代码执行了上半部分的工作，但我发现很难理解如何反转这个序列。

我意识到你可以写......

$colors: red, orange, yellow, green, green, yellow, orange, red;

但是我认为编写它的方式可能比这更简短？

HTML：

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>h</li>
</ul>

SCSS：

$colors: red, orange, yellow, green;

@for $i from 1 through length($colors) {
  li:nth-child(#{length($colors)}n+#{$i}) {
    background: lighten(nth($colors, $i), 20%);
  }
}

这是迄今为止我所拥有的demo，希望我想要实现的目标是否有意义，有人可以解释我是如何实现它的？

提前致谢！

Answer 1

你会对这样的解决方案感到满意吗？

/images/image1.jpg

fiddle

Answer 2

最简单的方法是让您的列表包含您想要循环的值。对于您的简短示例，手动编写它们将是最短的方法。如果它是一个很长的列表，那么滚动你自己的列表反转函数并加入列表可能更好。

@function list-reverse($xs) {
    $collector: ();

    @for $i from length($xs) through 1 {
        $collector: append($collector, nth($xs, $i));
    }
    @return $collector;
}

$colors: red, orange, yellow, green;
$color-list: join($colors, list-reverse($colors));

@for $i from 1 through length($color-list) {
  li:nth-child(#{length($color-list)}n+#{$i}) {
    background: lighten(nth($color-list, $i), 20%);
  }
}

Answer 3

或使用条件：

$colors: red, orange, yellow, green;
$n : 0;
@for $i from 1 through 2*length($colors) {
  @if $i > length($colors) {
    $n : $n - 1;
  } @else {
    $n : $i;
  }
  @if $i == length($colors)+1 { $n : $n+1;}

  li:nth-child(#{length($colors)}n+#{$i}) {
    background: lighten(nth($colors, $n), 20%);
  }
}

如何在第4个孩子身上反转SASS for loop？

3 个答案: