sass/cssで使いたい！Emmetのおすすめショートカット集
：sass / scss / cssコーディングで使用できるものに限定した、Emmetおすすめショートカット一覧です。
皆さんはEmmetを使っていますか？
Emmetチートシートという便利なものもありますが、
実際に使っているのは、この中の一部だったりします。。
ということで、
今回はsass/cssコーディングで使用できるものに限定し、
その中でもオススメを紹介します！
ちょこっと応用編もありますので、合わせてチェックしてみてください。
早速紹介していきます〜
おすすめショートカット（基本編）
※コマンドに使用している「：」は省略できます。
display
| コマンド | 展開後 |
|---|---|
| d | display: block; |
| d:n | display: none; |
| d:i | display:inline; |
| d:ib | display:inline-block; |
position、z-index系
| コマンド | 展開後 |
|---|---|
| pos:a | position:absolute; |
| pos:r | position: relative; |
| t | top: ; |
| r | right: ; |
| b | bottom: ; |
| l | left: ; |
| z | z-index: ; |
float系
| コマンド | 展開後 |
|---|---|
| fl | float: left; |
| fl:r | float: right; |
| cl | clear: both; |
margin
| コマンド | 展開後 |
|---|---|
| m | margin: ; |
| mt | margin-top: ; |
| mr | margin-right: ; |
| mb | margin-bottom: ; |
| ml | margin-left: ; |
| m0-a | margin: 0 auto; |
padding
| コマンド | 展開後 |
|---|---|
| p | padding: ; |
| pt | padding-top: ; |
| pr | padding-right: ; |
| pb | padding-bottom: ; |
| pl | padding-left: ; |
background
| コマンド | 展開後 |
|---|---|
| bg | background: #000; |
| bgc | background-color: #fff; |
| bgi | background-image:url(); |
| bgr | background-repeat:; |
| bgp | background-position:0 0; |
font,text系
| コマンド | 展開後 |
|---|---|
| fz | font-size: ; |
| fw | font-weight: ; |
| lh | line-height:; |
| ta:c | text-align:center; |
| c | color: #000; |
ちょこっと応用編
数字・単位の扱い方
デフォルトの単位はpxになっています。
%はp、emは.で扱うことができます。
| コマンド | 展開後 |
|---|---|
| w10 | width: 10px; |
| w10p | width: 10%; |
| w10. | width: 10em; |
カラーの指定方法
通常のコマンドの後に、カラーを指定します。
| コマンド | 展開後 |
|---|---|
| c#eee | color: #eee; |
| bgc#eee | background-color: #eee; |
ショートハンドプロパティの展開
最後に＋をつけることで、ショートハンドプロパティが記述された状態で展開されます。
| コマンド | 展開後 |
|---|---|
| bg+ | background: #fff url() 0 0 no-repeat; |
| bd+ | border: 1px solid #000; |
ベンダープレフィックスの追加
頭に-をつけることで、ベンダープレフィックスが記述された状態で展開されます。
| コマンド | 展開後 |
|---|---|
| -trf | -webkit-transform: ; -ms-transform: ; transform: ; |
＋でつないで、一気に展開する方法
各コマンドを＋でつなげることで、一気に展開することができます。
| コマンド | 展開後 |
|---|---|
| w100+h200+m0-a | width: 100px; height: 200px; margin: 0 auto; |
まとめ
今回は以上になります。
なんとなく使っているうちに覚えてきたりもしますので、 少しづつ使っていきましょ〜！