For loop 两个SCSS@for循环的交替值，并添加逗号分隔符

所以基本要点是，我最终想要输出一个Z字形剪辑路径，如下所示：

剪辑路径：多边形（0 5px，5px 0，10px 5px，15px 0，20px 5px，25px 0，30px 5px）

你可以看到我在网上做了什么

我在使用一个基于Hugo Giraudel的SCSS函数

下面的代码输出了两个序列：
5px 0px 5px 0px 5px 0px 5px 0px 5px 5px
和
0px 5px 10px 15px 20px 25px 30px 35px 40px 45px 50px

这些是我需要的值，你可以在剪辑路径中看到，但我找不到任何地方如何使用分隔符在x坐标和y坐标之间切换，以完成最后一步

这是可能的，还是我需要从另一个角度来看这个问题

@function zigzag($n) {

    $x-coord: 0px; // +5 each time
    $y-coord: 5px; // flip flop 5, 0, 5, 0

    @for $i from 1 through $n { 



        $last-x: nth($x-coord, length($x-coord));
        $new-x: $last-x + 5;

        $x-coord: append($x-coord, $new-x);



        $last-y: nth($y-coord, length($y-coord));
        $new-y: null;

        @if $last-y == 5px {

            $new-y: $last-y - 5px;

        } @else if $last-y == 0 {

            $new-y: $last-y + 5px;

        }

        $y-coord: append($y-coord, $new-y);

    }

    @return $y-coord $x-coord;

}

您似乎在寻找
逗号
分隔符

@mixin zig-zag($n){
  $l: ();  // list to hold $x $y pairs
  $x: 0;   // increment by 5
  $y: 5px; // flip flop 5 or 0
  @for $i from 1 through $n {
    // append both $x and $y to the list using comma as separator         
    $l:append($l, $x $y, comma);  
    $x: $x + 5px;             
    $y:if($y==0, 5px, 0);
  }
  clip-path: polygon($l);
}


// test
.class {
  @include zig-zag(7);
 }


// output
.class {
   clip-path: polygon(0 5px, 5px 0, 10px 5px, 15px 0, 20px 5px, 25px 0, 30px 5px);
}

我已经用你的解决方案更新了密码笔