Question

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

clip-path: polygon(0 5px, 5px 0, 10px 5px, 15px 0, 20px 5px, 25px 0, 30px 5px );

您可以看到我在Codepen

上所做的工作

我正在使用基于Hugo Giraudel Math Sequences之一的SCSS功能。

我有以下代码输出两个序列： 5px 0px 5px 0px 5px 0px 5px 0px 5px 0px 5px 和 0px 5px 10px 15px 20px 25px 30px 35px 40px 45px 50px

这些是我需要的值，你可以在剪辑路径中看到，但我找不到任何地方如何在x-coord和y-coord之间用分离器触发以完成最后一步。

这是可能的还是我需要从不同的角度来看待这个问题？

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

}

Answer 1

您好像在寻找comma分隔符

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

来自两个SCSS @for循环的备用值并添加逗号分隔符

1 个答案: