Zen-Codingの次期バージョン、Emmet について

^ (HTMLの機能)

Zen-Codingで、やりたかったけどできなかった『上の階層に戻る』機能。
今までは、"()"を駆使する形になっていましたが、"^"で階層を1段上がることができるようになりました。

<!-- 展開前 -->
(.header>.nav)+.logo <!-- Zen-Coding v0.7 -->
.header>.nav^.logo <!-- Emmet -->

<!-- 展開後 -->
<div class="header">
	<div class="nav"></div>
</div>
<div class="logo"></div>

"^"をつなげることで、階層をさらに、さかのぼる事ができます。

.header>.wrap>.nav^^.logo

ダミーテキストの生成

“Lorem ipsum”のダミーテキストを自動で生成されてくれるようになりました。

loremかlipsumと入力して、展開するとダミーテキストが生成されます。
最低8単語から、後ろに数字を付け加えることで、単語数を調整できます。

<!-- 展開前 -->
p>lorem
p>lorem8

ul>li*2>lorem10

<!-- 展開後 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam harum quasi voluptatum nisi repudiandae eius mollitia voluptatibus dolorum asperiores recusandae natus quis eligendi voluptas! Deleniti fugiat nulla ratione officiis quod?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt optio.</li>
  <li>Iusto similique aliquam animi illo aliquid asperiores reprehenderit minus accusantium!</li>
</ul>

高度なCSSサポート

今回のEmmetによって、CSSが痒いところまで届くようになりました。
以前のZen-Codingでは、任意の数値を入れることができませんでした。

Zen-Coding v0.7

/* 展開前 */
m:a
m:2
m:3
/* 展開後 */
margin: auto;
margin: 0 0;
margin: 0 0 0;

簡単な展開は可能でしたが、margin: 8px;などの数値を展開前に設定することができません。

Emmetでは、数値を入力して展開することが基本になります。

Emmet

/* 展開前 */
m:a
m:4
m8
m0-8
m0--8-8
z3
w100p
w100e
/* 展開後 /
margin: auto;
m::; / 今までの書き方が一部エラーになる */
margin: 8px;
margin: 0 8px;
margin: 0 -8px 8px;
z-index: 3;
width: 100%;
width: 100em;

接頭辞

Zen-Coding v0.7には、Reflect Valueがありましたが、使い勝手悪く接頭辞は自分で追加しなければなりませんでした。 Emmetでは、先頭に"-(ダッシュ)"を付けることによって、接頭辞を簡単に付け加えることができます。

/* 展開前 */
bdrs8 /* - なし */

-bdrs8


/* 展開後 */
border-radius: 8px; /* - なし */

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;

未知のプロパティ

CSS3, CSS4では、新しいものができたり、名前が変わったりすることがよくあります。
対応していないプロパティは、不明なプロパティとなります。
Zen-Coding v0.7では、不明なプロパティは、CSSではなく、要素として変換されていました。

Zen-Coding v0.7

/* 展開前 */
image-set
/* 展開後 */
<image-set></image-set>

style要素の中やCSSファイルでも、HTMLのように展開されていましたが、これが修正されています。
-(ダッシュ)を組み合わせることによって、接頭辞もサポートされます。

Emmet

/* 展開前 */
image-set
-image-set
/* 展開後 */
image-set: ;
-webkit-image-set: ;
-moz-image-set: ;
-ms-image-set: ;
-o-image-set: ;
image-set: ;

追記: Fuzzy search

Emmetから、Fuzzy searchという機能が加わりました。
この機能はCSSを「短縮形っぽく」書いて展開すると、その形式に似たプロパティ、または値が展開されます。

.foo {
  fl
  fll
  flol
  flr
}

/* 展開 */
.foo {
  float: left;
  float: left;
  float: left;
  float: right;
}

ノリでかけば、それっぽく展開してくれるので、CSSをEmmetで使用する敷居が低くなりました。
「Dreamweaverの補完機能と何が違うの？」と思われる方も少なくないでしょう。
慣れもある程度必要ですが、実際にやってみるとDwの補完機能よりもスピーディーにCSSを入力できるようになります。

Emmetのカスタマイズ

機能が充実しただけではありません。
スニペットとキーの配置情報が、jsonファイルによって独立化。
カスタマイズが行いやすくなりました。

• keymap.json
• snippets.json

snippets.jsonを触ることによって、スニペットを拡張することができます。
カスタマイズの方法は、以前と変わりません。

Zen-Coding カスタマイズの方法