代替2 SCSSからの値@Forループやカンマ区切り

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

：

は、私は、2つの配列を出力する以下のコードを持っています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); 
}