Sassで連番生成

スポンサーリンク

備忘。

CSSのclassを連番にするときなど、いちいちコピペするとソースも無駄に増えるうえ、面倒くさい。Sassなら数行で済む。

出力結果

こんな感じで、連番のclassや値をを自動生成したいとき。

 

Sassの記述

for文でぶん回せばOK。

この例だと、$iが1〜3になるまで繰り返される(1 through 3の部分)。つまり「1×5」「2×5」「3×5」が繰り返される。

他の応用技

例えばこんなことも。

出力結果

Sass

上のようなスタイルを生成したいときも、これだけ書けばOK。