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

在SCS中为迭代输出颠倒

@的顺序可以这样做：

SCSS示例：
输出：

这是SASS反向迭代的最佳方式吗？
是否有人知道一种更为“SCSS原生”的方法来实现这一目标，从而提高可读性？
您的解决方案还可以

您可以创建一个函数，该函数将：

@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);
  }
}

您可以使用第n个子项选择器

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

您可以重写数组：
$list:#ddd、#aaa、#bbb、#ccc
并使用
n个子项

@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);
  }
}

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