今回は、前回ご紹介した「【HTML編】最低限知っておくと楽なEmmet」のCSS編についてご紹介していきます！
Emmetって何？という方は前回の記事を参考にしてください！
※展開の仕方はHTML同様、Tabキーで展開されます。
それでは早速説明していきます！
CSS編
プロパティの展開
CSSでは、プロパティと値の頭文字をつなげて展開する形多いです！
例）w100、h100、tdnをそれぞれ展開すると・・・
body{
width: 100px;
height: 100px;
text-decoration: none;
}
となります。長いプロパティもEmmetであっという間にかけちゃいますね！
単位の展開
よく使う単位の指定は最初の文字だけで展開することが可能です！
何も単位を指定せずに展開するとデフォルトでpxが付くようになります。
例）m5、m5p、m5e、m5rをそれぞれ展開すると・・・
body{
margin: 5px;
margin: 5%;
margin: 5em;
margin: 5rem;
}
となり、簡単に単位を指定することが出来ました！
複数の指定
+で複数のプロパティを展開できます。
例）w100+m100p+tdn+c#fffを展開すると・・・
body{
width: 100px;
margin: 100%;
text-decoration: none;
color: #ffffff;
}
+を入力するだけでそれぞれ展開せずに済みますね！
-で値を複数指定できます。
例）p5-10-0-20+m0-aを展開すると・・・
body{
padding: 5px 10px 0 20px;
margin: 0 auto;
}
－でつなげることが出来るので、いちいち単位を指定する必要もありません！
ベンダープレフィックス
例）-bdrs15を展開すると・・・
body{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
－を前につけることで一気に記載できてとっても楽ですね！
以上、最低限知っておくと便利なEmmet【CSS編】でした！
HTMLに続き、CSSでもEmmetをフル活用して、楽で早いコーディングをしていきましょう！
