CSSを「速く」書くためのSublime Text 2のパッケージ「Hayaku!」について。
Package Controlからどうぞ
Zen-Codingとはおそらく共用できます。
Emmetを入れてると、記述がかなり似てるのでぶつかります(※ただし、展開キーをTabにしなければオッケー)。
Emmetと共存したければ、CSS系のファイルでTabの展開を切れば大丈夫(Cmd+Eで展開する)。
"disable_tab_abbreviations_for_scopes": "css,less,sass,scss,stylus"
これをSublime Text 2の自分の設定に追加。以上、再起動。
Hayakuは、かなりファジーな感じでキーワードを拾って展開します。
たとえば、
wd → width: 100%;
とか、
wih → width: 100%;
でも大丈夫。展開される。スペルミスこわくないw
他にもこんなのとか、
poa → position: absolute;
というわけ。だから結構楽。
値の入力については、Emmetみたいです。ただ、「m10-20」みたいなのは今のとこダメ。
m10 → margin: 10px;
とか、
m10.5 → margin: 10.5em;
みたいな感じで、小数点がつくと「em」になる。
m10e → margin: 10em;
というように、「p(px)」とか「e(em)」、「x(ex)」を付ければそれになる。
他にも、
ma → margin: auto;
とか、
cF → color: #FFF;
みたいに色の指定もそのままできる。
なので、
bgc#e0e0e0 → background-color: #E0E0E0;
ってこともオッケー。便利。
Emmetにもあるけど、「!important」とかも自動で付けられる。
一番最後に「!」つけるだけで、
wa! → width: auto !important;
こんな感じ。
あ、忘れてた。コメントは「//」って入れればオッケー。
// → /* */
こうなります。
入れよう、今すぐにでも。CSSをより速く!