Sassで連番生成

スポンサーリンク

備忘。

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

出力結果

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

 

Sassの記述

for文でぶん回せばOK。

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

他の応用技

例えばこんなことも。

出力結果

Sass

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

ABOUTこの記事をかいた人

dsuga

20代中頃まで、音楽をやりながらプラプラ。ドラム。
司法書士試験の勉強を1年強するも、落ちたのでとりあえずシステム会社に就職する。
仕事では主にWEBサイトの制作に携わり、ディレクター・デザイン・コーディング・プログラムはひと通りやった。
最近ではアプリ開発も行う。
次をどうしようか考えてる。
独立しました。

残飯処理担当。
出されたものは残さないがモットー。

TwitterやFacebookの申請大歓迎です。