効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本

HTML編に引き続き、今回はCSSでEmmetを書く時の基本についてです。

基本的な使い方

CSSの場合はHTMLよりも更に楽で、「Fuzzy Search（あいまい検索）」という機能があり、一言一句覚えなくても、それっぽい省略文字を入力してtabを押せば展開されます。

まずはプロパティの略から。
ものによっては1文字入力するだけで展開してくれるので、かなり効率的にCSSが書けるようになります。

プロパティの略の後に「:（コロン）」を付けて、値を入力すると値が指定できます。
値もある程度省略して入力できます。

値に数字を使用する場合は単位の指定も必要になってきます。
また、値に数字を入力するプロパティの場合は、:（コロン）は不要です。

色を指定する場合は「:（コロン）」の代わりに「#（ハッシュ記号）」を使ってその後にカラーコードを入力します。
また、カラーコードも便利に省略する事ができます。

変換前	変換後	説明
c#0	color: #000;	1文字の場合はRGB同じ値のカラーコードにしてくれる
c#ef	color: #efefef	2文字の場合はそれを3回繰り返してくれる
c#55acee	color: #55acee;	普通にカラーコードを入力すれば、そのまま展開してくれる
c#ccc.5	color: rgba(204, 204, 204, 0.5);	カラーコード + 小数点でrgba()に変換

マージンやパディングを入力する場合は、いくつか指定の方法があります。

例えば、「m」の後に数字をハイフン区切りで入力していくと、通常のCSSのように上下左右それぞれの値を設定できます。

変換前	変換後	説明
m20	margin: 20px;
m20-a	margin: 20px auto;	ハイフンで繋いで値2つ
m20-30-40	margin: 20px 30px 40px;	ハイフンで繋いで値3つ
m20-a40	margin: 20px auto 40px;	autoを使った後はハイフンは使わない（ハイフンを使った場合はネガティブマージンになる）
m20-30-40-50	margin: 20px 30px 40px 50px;	ハイフンで繋いで値4つ