SCSS / SASS列表反向迭代（反向循环）

Question

在SCSS中反转@for迭代输出的顺序可以这样做：

SCSS示例：GIST DEMO

$colors : green, gold, red;

a{
  $i : length($colors);
  @each $c in $colors {
      &:nth-child(#{$i}){
           fill:$c;
      }
      $i : $i - 1;
  }
}

输出：

a:nth-child(3) {
  fill: green;
}
a:nth-child(2) {
  fill: gold;
}
a:nth-child(1) {
  fill: red;
}

这是反向迭代的最佳方法吗？

有没有人知道更多“SCSS原生”方式来实现这一目标，从而提高可读性？

Answer 1

你的解决方案没问题。

您可以创建一个reverse阵列的功能：

@function reverse($list, $recursive: false) {
   $result: ();

   @for $i from length($list)*-1 through -1 {
      @if type-of(nth($list, abs($i))) == list and $recursive {
        $result: append($result, reverse(nth($list, abs($i)), $recursive));      
      }

      @else {
        $result: append($result, nth($list, abs($i)));
      }
   }

   @return $result;
}

$list: #aaa, #bbb, #ccc, #ddd;
$new-list: reverse($list);

@for $i from 1 through length($new-list){
  div:nth-child(#{$i}){
    color: nth($new-list, $i);
  }
}

您可以使用nth-last-child选择器。

@for $i from 1 through length($list){
  div:nth-last-child(#{$i}){
    color: nth($list, $i);
  }
}

您可以重写数组：$list: #ddd, #aaa, #bbb, #ccc并使用nth-child。