Sublimetext2でCSSを高速に書けるhayakuを紹介

sublimetext2の「hayaku」というパッケージが、思った以上に快適で、もはや無くてはならないpackageになったのでご紹介します。

hayakuを利用した直感的なCSSコーディング

どれくらい直感的にコーディングができるか、ほんの一例をご紹介します。

入力に決まりはありません。
雰囲気でキーを打ってtabを押すだけでCSSが自動補完されます。

例えば、text の align の center なので、txc、もしくは、txecなどを入れてtabを押すと、
txc


box-sizing: border-box;を入れたいから、boxsizingのborder-boxだから、なんとなく、bsizbとか入れてtabを押すと、ベンダープレフィックスまで自動で入れてくれます。

bsizb


position: relative;を入れたいから、poreとか。

pore

m10

bs

bs8

t10

lh1.5

fs13

ほんと入力する文字は、感覚でいいんです。

bgu

tsd

wbba

cup

bo

op0.8

co2

co21

感覚でこんな感じーで保管されちゃう。

he300

wi100

bor5


どうでしょうか。雰囲気で入力してtabを押すだけで、CSSのコードが補完されます。

hayakuを利用して色をコピーする

コピーした色をそのまま利用できる機能が便利です。

先にcolorでb7b7b7をコピーしておいて、bgcでtabを押すと、

が出てくる。
あとはこれの応用。

colorでb7b7b7をコピーしていて、bdcなら


hayaku すごいですね!
他に見つけたら追記していきます。
Zen-CodingやEmmetを利用していない人でも、hayakuは入れて損はないかと思います。