［み］Sublime Text2にCSSを早く書ける「Hayaku」をいれた

初心者向けのプログラミング学習サイトの「ドットインストール」に「Sublime Text2の基礎」が追加されたことは紹介しましたが、Sublime Text2でCSSを書くときにとてもとても便利なパッケージがありますので、紹介します。

その名は「Hayaku」

名前がすごいですね。名前の通り、CSSが速く書けます。というか、プロパティの綴りが心配な方には本当にうってつけです。ちょこっと例を紹介します。例えば、width: 100%;と書きたいときは、

CSS

.hoge {
	/* w とタイプしてTab */
	/* wd とタイプしてTab */
	/* wd100% とタイプしてTab */
	/* w: とタイプしてTab */
	/* wd: とタイプしてTab */
	/* w:100% とタイプしてTab */
	/* すると、 */
	width: 100%;
}

これ以外にも、相当いろんな書き方があると思います。それっぽくタイプしてTabキーで展開すると、ちゃんと書いてくれます。ただ、注意する点としては、数値に関するものは基本的に”px”で展開されます。ただ、%とかemとか使いたいときは、それっぽいのを数値の後ろにつけてやると大丈夫です。また、数値に小数点がつくときには基本的に”em”で展開されます。このときも、%とかpxとかにしたいときは、後ろにそれっぽいのをつけてやると大丈夫です。

CSS

.hoge {
	/* m10 → Tab */
	margin: 10px;
	/* m10% → Tab */
	margin: 10%;
	/* m10e → Tab */
	margin: 10em;
	/* m10.5 → Tab */
	margin: 10.5em;
	/* m10.5p → Tab */
	margin: 10.5%;
	/* m10.5px → Tab */
	margin: 10.5px;
	/* m10.5px → Tab */
	margin: 10.5px;
}

注意するところはこのくらいで、あとはそれっぽくタイプしてTabしてみると、とっても楽しいですよ！

あ、忘れていましたが、インストールはPackage Controlからどうぞ。