ページ

2013/03/02

Emmet v1.0がリリース!ナンバリング展開が逆順に対応!

まず、Emmetって何?って人は以下の記事を見てください。
[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieve

リリース時のブログの記事はこちら → Emmet v1.0 is out
ベータ版からも細かく色々改善されているけど、
ナンバリング展開がかなり強化されていたので解説します。

ナンバリング展開

ul>li.item$*5>lorem3
<ul>
    <li class="item1">Lorem ipsum dolor.</li>
    <li class="item2">Saepe debitis itaque.</li>
    <li class="item3">Placeat amet veniam.</li>
    <li class="item4">Perferendis minima accusamus!</li>
    <li class="item5">Possimus velit iusto!</li>
</ul>
$マークが数値に展開されるというベータ版でもあった機能です。

逆順展開

ul>li.item$@-*5>lorem3
<ul>
    <li class="item5">Lorem ipsum dolor.</li>
    <li class="item4">Recusandae hic alias.</li>
    <li class="item3">Eos porro nobis!</li>
    <li class="item2">Nemo ratione distinctio!</li>
    <li class="item1">Pariatur quod exercitationem!</li>
</ul>
@修飾子を付加することによってナンバリングの始点が展開されます。
-修飾子でナンバリングを逆順に展開することができます。

逆順ナンバリング展開の終点指定

ul>li.item$@-3*5>lorem3
<ul>
    <li class="item7">Lorem ipsum dolor.</li>
    <li class="item6">Est accusantium corporis.</li>
    <li class="item5">Sed delectus illum.</li>
    <li class="item4">Repudiandae inventore itaque.</li>
    <li class="item3">Esse quos error.</li>
</ul>
-修飾子の後に数値を書くことでその数値が終点になるように逆順に展開してくれます。
つまり、上記の逆順展開は以下の省略形であることがわかります。
ul>li.item$@-1*5>lorem3

ナンバリング展開の始点指定

ul>li.item$@3*5>lorem3
<ul>
    <li class="item3">Lorem ipsum dolor.</li>
    <li class="item4">Quaerat doloremque dicta?</li>
    <li class="item5">Fugiat alias labore.</li>
    <li class="item6">Assumenda corporis quis.</li>
    <li class="item7">Illo perferendis totam.</li>
</ul>
逆順展開の終点が指定できるということは
通常のナンバリング展開でも始点を指定して展開できるのでは?と考えたあなたは鋭いです。
ちなみに数値を指定せずに以下のように書くと通常のナンバリング展開と同様に展開されます。
ul>li.item$@*5>lorem3
デフォルトで1が指定されたものと同じ動作をしますので
$@ で一つの修飾子として覚えてしまうのが良いかもしれません。

ドキュメントはこちら → Abbreviations Syntax #Item numbering: $ | Emmet Documentation