コーディングの速度を爆速にしてくれるemmet。
HTML側の連番出力は公式サイトでも解説があるので、簡単にできていたのですが、HTML側で連番でclass名とかを出力したら、CSS側でも連番出力したい!でも公式で調べても見つからなかったので、色々と試していたらCSS側でも連番で出力する方法が分かったのでメモ。
連番で出力させる
codepenやJSFiddle等でサンプルソースを作成する時とかに結構役立ったりしています。そんなに連番作成することは無いと思うのですが、100個の連番を出力するときは便利です。
まずはHTMLの連番出力。
<!-- sampleのクラス名に連番をつける -->
h3.sample${見出しデザイン}*10
<!-- ctrl + Eで展開 -->
<!-- ↓出力例↓ -->
<h3 class="sample1">見出しデザイン</h3>
<h3 class="sample2">見出しデザイン</h3>
<h3 class="sample3">見出しデザイン</h3>
<h3 class="sample4">見出しデザイン</h3>
<h3 class="sample5">見出しデザイン</h3>
<h3 class="sample6">見出しデザイン</h3>
<h3 class="sample7">見出しデザイン</h3>
<h3 class="sample8">見出しデザイン</h3>
<h3 class="sample9">見出しデザイン</h3>
<h3 class="sample10">見出しデザイン</h3>
続いてCSSの出力例です。
/* .sampleに連番をつける */
{.sample$ {}}*10
/* ctrl + Eで展開*/
/* 出力例 */
.sample1 {}
.sample2 {}
.sample3 {}
.sample4 {}
.sample5 {}
.sample6 {}
.sample7 {}
.sample8 {}
.sample9 {}
.sample10 {}
class名を{}(ブレイス)で囲み、後ろに連番出力の$(ダラー)を付けます。
半角スペースを入れ、{}(ブレイス)を再び中に記述。
注意点としては$(ダラー)の後に半角スペースを入れないと、正常に展開されない。
あんまり実用性はありませんが、こんな使い方もできます。
/* .sampleに連番をつける */
{.sample$ {border:$px solid #000;}}*10
/* ctrl + Eで展開*/
/* 出力例 */
.sample1 {border:1px solid #000;}
.sample2 {border:2px solid #000;}
.sample3 {border:3px solid #000;}
.sample4 {border:4px solid #000;}
.sample5 {border:5px solid #000;}
.sample6 {border:6px solid #000;}
.sample7 {border:7px solid #000;}
.sample8 {border:8px solid #000;}
.sample9 {border:9px solid #000;}
.sample10 {border:10px solid #000;}