替代值，並添加逗號分隔符

Question

所以基本要點是，我最終想要輸出鋸齒形夾的路徑，像這樣：

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

你可以看到我做了什麼on 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); 
}