CSS - CSSグリッドのためのヘルパー - あなたは、CSSグリッドについて聞いた場合は、文字列リピート/

Question

を構築し、多分あなたは同じ問題につまずい：

私はpostcssでのループを構築しようとしています（ただし、計算と、私は似たものを構築する必要があり、ここで-ms-サポートし、取り残さそれをシンプルに保つために）私のページで簡単にクラスを使用するため、このようなものを構築するために

.ac-grid--even-1 { 

     grid-template-columns: 1fr; 
    } 


.ac-grid--even-2 { 

     grid-template-columns: 1fr 1fr; 
    } 


.ac-grid--even-3 { 

     grid-template-columns: 1fr 1fr 1fr; 
    } 

私の唯一の問題はここにあります...いったい私は 1FR 1FR 1FRのように。水平ものを繰り返すことができますか？パッケージやものを探しているが、波平何かの役に立つを見つけることができました：<私のようなものを探しています：テリー

へ

ありがとう：

.ac-grid--even { 

    @for $grid_number from 1 to 12 { 
    &-$grid_number { 

     grid-template-columns: $grid_number * '1fr '; 
    } 
    } 
    } 

はあなたに

---

編集ありがとうございました

postcssの場合、誰かがそれを必要とする場合は少し違う：

$incrementalFr: 1fr; 
    @for $grid_number from 1 to 12 { 
     .ac-grid--even-$grid_number { 

      grid-template-columns: $incrementalFr; 
     } 
     $incrementalFr: $incrementalFr 1fr; 
    } 

---

EDIT2：この方法は、計算では動作しません：/

例：それはちょうど、その結果何を、一度に一つのパーツが追加されますので、理にかなって

$incrementalFr: 1fr; 
    $test: ; 
    @for $grid_number from 1 to 12 { 
     $col: $grid_number; 
     $spacer: ($col - 1); 
     $test: $test calc((100%/$col) - (($grid-gap * $spacer)/$col)) $grid-gap; 

     &-$grid_number { 
      -ms-grid-columns: $test; 
      grid-template-columns: $incrementalFr; 
     } 
     $incrementalFr: $incrementalFr 1fr; 
    } 

文字列の繰り返しが、ブロック^^あなたは、IE

気の代わりに数字の増加に伴って「正しい」長!!!

他の提案？回避策？パッケージ？

Answer 1

あなたはSASSで次のロジックを使用することができます。

1. 1frで始まる変数、例えばを宣言します（あなたは、合計で12回のクラスを持つことになりますので、13が含まれていません）
2. $incrementalFr: #{"1fr"};は13に1を通じて@forループ、ループを使用してください。 append($incrementalFr, #{"1fr"})
を使用して、（ 1frは、次の反復でもう一度繰り返されるように）、あなたは変数に 1frを追加し、各イテレーションの終わりに grid-template-columns: $incrementalFr;
3. ：各ループで
4. 、クラスを宣言し、それを変数に割り当てられましたここで

はSASSコード（check out the compiled CSS）です：

$incrementalFr: #{"1fr"}; 

@for $grid_number from 1 to 13 { 
    .ac-grid--even-#{$grid_number} { 
     grid-template-columns: $incrementalFr; 
    } 
    $incrementalFr: append($incrementalFr, #{"1fr"}); 
} 

（簡略化のために切り捨て）にコンパイルCSSは次のようになります。

.ac-grid--even-1 { 
    grid-template-columns: 1fr; 
} 

.ac-grid--even-2 { 
    grid-template-columns: 1fr 1fr; 
} 

.ac-grid--even-3 { 
    grid-template-columns: 1fr 1fr 1fr; 
} 

// ... 
// Lines are truncated for brevity 
// ... 

.ac-grid--even-12 { 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
}