以前はzencodingという名前だったEmmetですが、HTMLに限らずCSSでも威力を発揮します。例えばmargin: 10px;と１３文字打っていたものが、m10のようにたった３文字で記述できてしまうのです。
この記事ではEmmetをCSSで使う方法を紹介します。
HTML編はこちら: HTMLを効率よく書く！Emmetの書き方・使い方まとめ
Emmetの書き方・使い方 CSS編
Emmetのインストール
Emmetは各コードエディターにインストールする必要があります。インストール方法や基本的な使い方については、HTMLを効率よく書く！Emmetの書き方・使い方まとめをご覧ください。
EmmetでCSSを書く方法 基本編
Emmetを使ったCSSの記述方法を確認していきます。まずは簡単なところから。
基本的には各プロパティごとに展開していきます。プロパティの短縮系はチートシートのCSSの項目をみてください。
f-n
mb10
bd+
bdrs3
/* 展開後 */
float: none;
margin-bottom: 10px;
border: 1px solid #000;
border-radius: 3px;marginやwidthなどを展開するとpxで表示されますが、%やemにすることもできます。また、小数点をつけると自動的にemになります。
w80p
m10e
p10x
fz1.5
/* 展開後 */
width: 80%;
margin: 10em;
padding: 10ex;
font-size: 1.5em;padding: 10px 15px;のように複数の値を入れる場合は以下のようにします。
p10-15
m5-0-10-20
/* 展開後 */
padding: 10px 15px;
margin: 5px 0 10px 20px;#000などのカラーの入力はこんな感じ。rgbaなども対応してますね。あとborderの記述もよく使います。
c#0
c#e0
c-ra
bd1#cs
/* 展開後 */
color: #000;
color: #e0e0e0;
color: rgba(0, 0, 0, .5);
border: 1px #ccc solid;最後に!important。手書きだと結構めんどくさいですが、Emmetなら一発です。
fz12!
f-l!
/* 展開後 */
font-size: 12px !important;
float: left !important;EmmetでCSSを書く方法 応用編
EmmetならVendor prefixも１行で簡単に記述することができます。１度にすべて書き出すことも、１つずつ任意につけることもできます。
-w-bdrs2
-m-bdrs2
-s-bdrs2
-o-bdrs2
-wmso-bdrs2
/* 展開後 */
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
次はグラデーション。lg()で展開できます。
lg(left,#fc0,red);
/* 展開後 */
background-image: -webkit-linear-gradient(left, #fc0, red);
background-image: -o-linear-gradient(left, #fc0, red);
background-image: linear-gradient(to right, #fc0, red);さいごに
グラデーションはEmmetを使ってもいいんですが、もっと細かく設定できるBourbonのようなMixinを使った方がいいかもしれないです。Prefixはつけ忘れなどのリスクもあるためGruntやCodekitなどで自動化するのがおすすめ。
Emmetに加えてSassも使えるようになるとCSSスタイリングの効率がかなり上がります。最初は少しとまどうかもしれないですが、Sassのほうも是非チャレンジしてみてください。
Sass（SCSS）の簡単な使い方まとめ
