Skip to content

Instantly share code, notes, and snippets.

@gaspanik
Last active October 13, 2015 03:57
Show Gist options
  • Save gaspanik/4135513 to your computer and use it in GitHub Desktop.
Save gaspanik/4135513 to your computer and use it in GitHub Desktop.
ST2: Hayaku ja

Hayakuの使い方

CSSを「速く」書くためのSublime Text 2のパッケージ「Hayaku!」について。

インストール

Package Controlからどうぞ

使い方

Zen-Codingとはおそらく共用できます。

Emmetを入れてると、記述がかなり似てるのでぶつかります(※ただし、展開キーをTabにしなければオッケー)。

Emmetとの共存

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をより速く!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment