Zen CodingもといEmmetを使いこなすとまでいかなくとも、それなりに使ってはいるが、実はCSSではあんまり活用していなかった。

というもCSSに関しては、多少Emmetや他のコード補完プラグイン（パッケージ）の支援はあるものの、HTMLよりも手グセというか、自然とプロパティなり値なりをさっさと書いてしまうし、それほどありがたい、と思えるほどでもない。

またZen Codingにせよ、Emmetにせよ、短縮形のルールが決まっているし、それらを覚えないといけないので少し大変だ。

追記（2012-11-30）: Emmetでも若干ファジーに書ける様子。

そこでHayaku、らしい

二度見しそうな名前だが、これはHayakuというSublime Text2のパッケージ。Emmetと違い、対象になるのはCSS（とCSSプリプロセッサ）であり、前述の通りCSSの記述に関してはこれといったツールを使っていない自分でも感動した。

ちなみにHayakuについてはもうすでにSublime Text2を布教しているエライ人によって簡潔にまとめられているが、とりあえずひと通りやってみた、ってことで書いていく。

とりあえずHayakuで何ができるのか

CSSでoverflow:hiddenと書きたいとき、どうタイプするか？

もちろんCSSとして書くならもちろんそのまま書くでしょうが、 これをEmmetで書く場合はこう。

div {
	/* ov:h とタイプして、Tabキーとか */
	overflow: hidden;
}

ov:hとタイプするのはEmmetパッケージにある、snippet.jsonというファイルで定義されていて、この書き方じゃないと展開しない（はず）。

で、Hayakuです。

div {
	/* oh とタイプして、Tabキーとか */
	overflow: hidden;
}

これはHayai。

Hayakuがすごいのは実はこれじゃない。

div {
	/* oh とタイプして、Tabキーとか */
	/* o:h とタイプして、Tabキーとか */
	/* o:h とタイプして、Tabキーとか */
	/* ov:h とタイプして、Tabキーとか */
	/* overfl:hidn とタイプして、Tabキーとか */
	overflow: hidden;
}

これはHidoi。いやSugoi。

なんかもうノリでタイプすれば、それが出る。 これでもうHayakuが気になった人は、次へ進んでください。

Hayakuのインストール

多くは語るまい。Sublime Text2な人なおなじみの、Install Packageから“Hayaku”と叩けばOK。

Emmetとの共用

この手のパッケージはキーバインドがぶつかりやすいので気をつけること。Tabキーでの展開がHayakuでもEmmetでもデフォルトとなっているので、あらかじめそれを回避しておく。これはEmmetの方のパッケージ設定でおこなう。

Preference > Package Settings > Emmet > Setting - User

何も手を入れてなければ、おそらくこの中は空っぽであるはずなので、ここに下記のような設定をいれておく。

{
	// TABキーによる展開を対象の言語（ファイル）のときに無効化する
	"disable_tab_abbreviations_for_scopes": "css,less,sass,scss,stylus"
}

ちなみにこれを見て、もしかして、思ったかもしれないが、CSSを書くときだけでなく、SassやLESSなどのCSSプリプロセッサで書く場合にもHayakuは使える。

ここで少しSublime Text2の設定についての補足をしておくと、前述の設定までのパスを追っていくと、Usersではなく、Defaultというのも参照できるが、設定を変える場合にはDefaultを書き換えるのではなく、Usersの方に書くようにする。そうすることでDefaultの設定を上書きすることができる。

Hayakuの機能をいくつか紹介

ではHayakuでの書き方をいくつか紹介する。

div {
	/* wd */
	wd → width: 100%;
}

それっぽい二文字くらいで大体展開。

div {
	/* wd */
	wd → width: 100%;
	/* m10 */
	margin: 10px;
	/* pt-10 */
	padding-top: -10px;
	/* fs1.5 小数点をつけるとem */
	font-size: 1.5em;
	/* cF */
	color: #FFF;
	/* bx0.5 */
	-webkit-box-shadow: rgba(0,0,0,.5);
	        box-shadow: rgba(0,0,0,.5);
	/* di! */
	display: inline !important;
}

div {
	/* m10 */
	margin: 10px;
	/* pt-10 */
	padding-top: -10px;
	/* fs1.5 小数点をつけるとem */
	font-size: 1.5em;
}

数字をいれるとこんな感じ。Emmetに近いけど、少しだけ違う。Emmetだとショートハンドで書きたいときに、w10-8みたいな書き方で展開できる。Hayakuでは今のところそれができないのでちょっと不便。

div {
	/* cF */
	color: #FFF;
	/* bx0.5 */
	-webkit-box-shadow: rgba(0,0,0,.5);
	        box-shadow: rgba(0,0,0,.5);
}

色の指定を加えるならこんな感じ。rgbaの書き方はちょっと感動。

div {
	/* di! */
	display: inline !important;
}

!をつければ、!importantを追加。たまーに使う。

とりあえず入れてて損はない

設定を変えないとEmmetなどとぶつかるというのはあるとして、基本的には邪魔をするものでもないし、ミスタイプをしたときも勢いでカバーできるっていうイメージで導入してみるとどうでしょうか。