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

tool, WEB制作

コーディングの速度を爆速にしてくれるemmet。
HTML側の連番出力は公式サイトでも解説があるので、簡単にできていたのですが、HTML側で連番でclass名とかを出力したら、CSS側でも連番出力したい!でも公式で調べても見つからなかったので、色々と試していたらCSS側でも連番で出力する方法が分かったのでメモ。

スポンサーリンク

連番で出力させる

codepenやJSFiddle等でサンプルソースを作成する時とかに結構役立ったりしています。
そんなに連番作成することは無いと思うのですが、100個の連番を出力するときは便利です。

まずはHTMLの連番出力。

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

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

続いてCSSの出力例です。

class名を{}(ブレイス)で囲み、後ろに連番出力の$(ダラー)を付けます。
半角スペースを入れ、{}(ブレイス)を再び中に記述。

注意点としては$(ダラー)の後に半角スペースを入れないと、正常に展開されない。

あんまり実用性はありませんが、こんな使い方もできます。

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


PAGE TOP