Emmet でCSSコーディングをスピードアップ

eye_css-speedup

前回はHTMLマークアップ作業での Emmet 記法を勉強しましたが、今回はCSSコーディング作業での Emmet 記法を学びます。
例によって Emmet Documentation の意訳ですので、英語が読める方は本家で確認したほうが確実です。

Emmet に用意されているCSSのスニペットは500以上も用意されているそうで、それっぽい省略をフィーリングで入力すれば展開できたりしちゃいます。
Fuzzy search(あいまい検索)が仕事をしてくれるので、CSSプロパティ名が頭に入っていればまず問題ないかと思います。

チートシート も公開されているので、ざっと目を通しておいてもいいかと思います。

Emmet でのCSSコーディング

Emmet では1つのCSSプロパティに対していくつものスニペットを用意しています。例えば m 一文字を展開すれば margin: ; と出力されます。ただ、目的があって値を指定しないのでない限り、こんな使い方はしないでください。Emmet はコーディング作業を大きく最適化できます。マージンの値を10pxに指定したいなら、単純に m10 とだけ入力してください。展開する事で margin: 10px; と出力されます。複数指定をしたければ-(ハイフン)で繋いでください。m10-20 を展開することで margin: 10px 20px; と出力されます。
負の値ですか?問題ありません。気にせずにハイフンで繋いでください。m-10–20 は margin: -10px -20px; と展開されます。

どんな動作をしているのか

Emmet では CSSプロパティを展開するために特別な処理を行います。

m10 という省略表記を展開する時に、何をしているのでしょうか。

まず始めに、snippets.json から m10 という定義を探します。見つかれば、単純にそれを出力します。見つからない場合、それを省略表記とみなします。

使い勝手を良くするために、: によるセパレーターは全く必要としません。m5 と打つほうが m:5 よりもかなり速いですよね。
数字またはハイフンが見つかった時点で、そこが値であるということがわかります。
m10 を例に出すと、m がプロパティ、 10 が値になるわけです。

プロパティ部分がわかれば、snippets.json から定義を探します。m という断片定義から margin: |; だと特定できました。(|(バーティカルバー)は展開された時にキャレット位置の指定に使われます。)

このスニペットがCSSプロパティに間違いなさそうなので(ここがミソ!)Emmet はそれをCSSプロパティと断定し、| の位置に値を挿入します。

値に単位を付ける

デフォルトでは、整数値を展開する場合 Emmet は px として出力します。
小数ならば em として扱います。

ですが、単位をはっきり指定してやる事も当然できます。

単位をはっきり指定しているならば、ハイフンを使う必要もありません。

単位のエイリアス

Emmet では、単位をあらわすエイリアスを使用できます。

  • p → %
  • e → em
  • x → ex

色の指定

Emmet での色の指定は、16進数による指定をサポートしています。c#3 を展開すれば color: #333; となります。#記号が必要ですが、ハイフン繋ぐ必要はありません。
例として、 bd5#0s を展開すると border: 5px #000 solid; と出力されます。 #記号により 5 とは別の値であると判定し、s は16進数ではないので solid の省略であると判別できるわけです。

色指定では 1つ、2つ、3つ、もしくは6つ全部という方法で指定できます。

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

標準設定では #ffcc00 はCSSの省略表記である #fc0 で出力します。変更したい場合は、Emmet の設定を変更してください。

単位の要らないプロパティ

いくつかのCSSプロパティは、値に単位が必要ないものがあります。その場合は展開後も単位は出力しません。例として、 lh2 は line-height: 2; 、 fw400 は font-weight: 400; となります。

!important ルール

!(エクスクラメーション)を入力することで important ルールも追加できます。important の表記は末尾に追加されます。

ベンダープレフィックス

CSS3 の新しい機能はWeb開発者にとって喜ばしいものです。数行のコードで、数年前にはほぼ不可能だった事を実現できます。しかし、これらは同時に頭痛のタネでもあります。各種ブラウザの為に同じプロパティを何度も書く必要があるのですから。

Emmet は、CSS3のコーディングを大幅に簡略化させるための便利な機能を備えています。CSSプロパティの頭に -(ハイフン) を置いてあげるだけで、Emmet が自動的にベンダープレフィックス付きで展開してくれます。

さらに、Sublime Text 3 の複数選択機能でこれらの値を一括で入力できます。

どんな動作をしているのか

Emmet は、先頭にハイフンを持っていた場合でも、ハイフンを除いた形で snippets.json を検索します。先ほどの例ならば、bdrs で断片定義を見つけることが出来ます。

border-radius プロパティが見つかりましたので、それを展開します。見つからなかった場合は、省略表記そのものがCSSプロパティ名として扱われます。

プロパティーが特定できた後に、ベンダーカタログを参照します。ベンダーカタログはユーザ設定で変更することもできます。

ベンダーカタログで対応するプロパティが見つかった場合、それに変換して出力します。見つからなかった場合は、そのまま全てのベンダープレフィックス付きで出力します。

例えば、super-foo という定義されていないプロパティを展開すると

このように出力されます。これは、まだ実装間もない最新のプロパティを試すときなどに利用できます。

標準でベンダープレフィックス付きのプロパティ

CSSプロパティの中には、ベンダープレフィックスが付く事が前提のものがいくつかあります。例えば transform プロパティです。こういったプロパティは頭にハイフンを打つこともわずらわしいですよね。

そんな事もあろうかと、Emmet では css.autoInsertVendorPrefixes 設定を標準で有効にしてあります。これによって、ベンダープレフィックス前提のプロパティは先頭のハイフンをつけなくても、自動的にベンダープレフィックスを挿入するようになっています。

ベンダープレフィックスの一部抽出

稀に特定のベンダープレフィックスのみを出力したい場合があります。 webkit と moz のプレフィックスだけを出力したい場合は、次のように記述できます。

各プレフィックスのエイリアスとして、次の文字を当てています。

  • w: webkit
  • m: moz
  • s: ms
  • o: o

今回はここまで。次回は Sublime Text 3 における Emmet の便利機能をチェックします。