SASS/SCSSループを使用してこれを書き直すにはどうすればよいですか？

Question

以下のコードブロックをより簡潔なSassループで記述したいが、scssのループにネストしようとする問題に遭遇した。ここ

は私が生成したいコードです：ここ

/* two items */ 
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(2), 
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(1) { width: 50%; } 

/* three items */ 
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(3) { width: 25%; } 
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(2) { width: 50%; } 
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(1) { width: 25%; } 

/* four items */ 
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(4) { width: 16.65%; } 
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(3) { width: 33%; } 
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(2) { width: 33%; } 
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(1) { width: 16.65%; } 

/* five items */ 
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(5) { width: 12.5%; } 
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(4) { width: 25%; } 
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(3) { width: 25%; } 
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(2) { width: 25%; } 
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(1) { width: 12.5%; } 

/* six items */ 
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(6) { width: 10%; } 
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(5) { width: 20%; } 
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(4) { width: 20%; } 
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(3) { width: 20%; } 
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(2) { width: 20%; } 
.stepwizard li.stepwizard-step:nth-child(6):nth-last-child(1) { width: 10%; } 

/* seven items */ 
.stepwizard li.stepwizard-step:nth-child(1):nth-last-child(7) { width: 8.33%; } 
.stepwizard li.stepwizard-step:nth-child(2):nth-last-child(6) { width: 16.66%; } 
.stepwizard li.stepwizard-step:nth-child(3):nth-last-child(5) { width: 16.66%; } 
.stepwizard li.stepwizard-step:nth-child(4):nth-last-child(4) { width: 16.66%; } 
.stepwizard li.stepwizard-step:nth-child(5):nth-last-child(3) { width: 16.66%; } 
.stepwizard li.stepwizard-step:nth-child(6):nth-last-child(2) { width: 16.66%; } 
.stepwizard li.stepwizard-step:nth-child(7):nth-last-child(1) { width: 8.33%; } 

が動作していない私の最初の試み、次のとおりです。 私も私が作る必要がある部分に得haventは最初と最後の商品は中間商品の幅の半分です。

@for $i from 2 through 7 { 
    @for $j from 1 through $i { 
    .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{$i - $j}) { 
     width: percentage(1/$i) 
    } 
    } 
} 

ご協力いただければ幸いです。

更新済みコード： jhprattがループ構文に関して正しい方向を指してくれてくれてありがとうございます。

@for $i from 2 through 7 { 
    /*! #{$i} step wizard spacing */ 
    @for $j from 1 through $i { 
     .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{($i - $j)+1}) { 
      @if $j == 1 or $j == $i { 
       width: percentage(0.5/($i - 1)); 
      } @else { 
       width: percentage(1/($i - 1)); 
      } 
     } 
    } 
} 

Answer 1

は、ここでは、比較的自明であるべき

@for $i from 2 through 7 { 
    @for $j from 1 through $i - 1 { 
     .stepwizard li.stepwizard-step:nth-child(#{$j}):nth-last-child(#{$i - $j}) { 
      @if $j == 1 or $j == $i - 1 { 
       width: percentage(0.5/($i - 1)); 
      } @else { 
       width: percentage(1/($i - 1)); 
      } 
     } 
    } 
} 

これ探しているものです。