EmmetでCSSを記述する時、連番表示をしたい場合の方法

tool, WEB制作

コーディングの速度を爆速にしてくれる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>

emmetの基本的な展開例等も下記の記事でまとめていますので、良ければご参考にしてください。

初心者向けEmmetの基本【HTML編】
【HTML編】初心者向けEmmetの基本
【CSS編】初心者向けEmmetの書き方

続いて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;}

この記事が気に入ったら
『いいね』しよう!