[SublimeText]Emmetで高速HTML/CSSコーディング CSS編

CSSの展開

HTMLやXML、その他の構造化言語に適しているEmmetがCSSで何ができるかというと、
ショートハンド(速記)でスニペットや自動補完を助けてくれます。
それによってCSSでも爆速コーディングが実現可能です。
例えば、m と打って展開すれば margin: ; となるので後は 10px と打てばいいのです。
また、m10 と打って展開すれば margin: 10px; と展開されます。
複数の値を指定したい場合は m10-20 のように
ハイフン区切りで入力することで margin: 10px 20px; と展開出来ます。
マイナスのマージンを指定する場合は m-10 と打てば margin: -10px; と展開出来ます。
複数の値でマイナスを含む場合は m10--20 のようにすれば
ハイフンとマイナスを自動判定して margin: 10px -20px; のように展開してくれます。

単位補完

値から単位を補完してくれます。
整数ならpx(m10 → margin: 10px;)、
少数ならem(m1.5 → margin: 1.5em;)が補完されます。
単位にはそれぞれエイリアスがあり、p → %, e → em, x → ex, r → rem で変換されます。
m10p20e30e40r なら margin: 10% 20em 30ex 40rem; となります。
px以外は複数の値を区切るハイフンは不要です。つけてしまうとマイナスになってしまいます。

z-index, line-height, opacity, font-weight は単位が要らないプロパティなので
単位なしで展開されます。
設定で css.unitlessProperties を上書きすることで動作を変更することができます。
詳しくは preferences.json | Emmet Documentation を見てください。

色コード展開

シャープの後の16進数の文字の長さによって展開のされ方が変わります。
例

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

初期設定では自動短縮されるようになっているので #ffcc00 は #fc0 になってしまいます。
Sublime Text 2では設定で以下のように設定すれば自動短縮を無効に出来ます。

"preferences": {
    "css.color.short": false
}

詳しくは preferences.json | Emmet Documentation を見てください。

!important

!をつけることで !important を補完することができます。

m10! → margin: 10px !important;

その他にも大量の補完が存在し、全てを紹介することはできないので
各自で emmet-sublime/emmet/snippets.json at master · sergeche/emmet-sublime · GitHub を確認してください。
結構想像がつくようなものばかりなので暗記しなくてはいけないようなものではないです。
あるかな？ぐらいの気持ちで展開すると良い感じに展開してくれます。

ベンダープレフィックスの補完

CSSの新機能を使用する際には各ブラウザが独自の実装をしている場合、
それぞれベンダープレフィックスというものを付けなければいけません。
Emmet ではハイフンを付けて展開することで自動でベンダープレフィックスを補完してくれます。

-bdrs

-webkit-border-radius: |;
-moz-border-radius: |;
border-radius: |;

Sublime Text 2 だとパイプの位置にカーソルが合うので入力しやすいです。
もちろん -bdrs4 とすれば 4px まで補完されます。

ベンダープレフィックスの説明には border-radius がよく使われるけど
border-radius はもうベンダープレフィックスいらないのに何故でしょう…？

もっと詳しくは Vendor prefixes | Emmet Documentation から。

Gradients

長ったらしい background-image: linear-gradient をベンダープレフィックス付きで展開してくれます。

lg(left, blue, red)

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(blue), to(red));
background-image: -webkit-linear-gradient(left, blue, red);
background-image: -moz-linear-gradient(left, blue, red);
background-image: -o-linear-gradient(left, blue, red);
background-image: linear-gradient(left, blue, red);

W3C の linear-gradient は to キーワードが必要です(でした？)。
CSS Image Values and Replaced Content Module Level 3
Gradients | Emmet Documentationによると W3C spec では to キーワードが要らなくなったみたいです。
(※ソースどこ？知ってる人教えて下さい。)

Emmet の lg() もそれに対応しています。が、それによってドキュメントのデモがバグってしまっています。
展開後のカラーを一つ変えて展開すると他のカラーも同様に変わるというデモだったのですが、
バグって動かないので Try it yourself で試してみてください。
そして Sublime Text 2 の Emmet でも動きません。
うん。linear-gradient めんどくさい。使うのやめよう。

Fuzzy search

良い感じに展開してやるからチートシート見とけ。(超訳)
by Fuzzy search | Emmet Documentation

さいごに

前回の記事：[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

前回の記事からだいぶ期間が空いたけど面倒くさかったとかそういうことはない。
決してそんなわけではない。
あと、最後めんどくさくなったとかそんなこともない。
Gradients がバグってて萎えたとかそんなことはない。

次はたぶんActions | Emmet Documentation をまとめる。