Pada artikel sebelumnya kita telah membahas bagaimana sebuah plugin Emmet sangat bermanfaat dalam membuat halaman HTML. Namun, selain HTML, Emmet juga mendukung bahasa lain yang merupakan teman setianya, yaitu CSS.
Berbeda dengan HTML, di dalam mempercepat koding CSS, beberapa syntax yang sudah diterangkan di HTML sebelumnya tidak bisa digunakan lagi atau dimerging fungsinya. Seperti fungsi childing > dan sibling + akan menghasilkan output yg sama.
Untuk lebih mudah memahami fungsi-fungsi Emmet di CSS, kita akan langsung mempraktekannya dibawah.
Menulis CSS dengan Emmet
Dalam penggunaanya, baik di CSS maupun HTML, sama-sama dipicu dengan penekanan tombol tab keyboard. Biasanya dalam CSS, syntax yang digunakan hanya merupakan singkatan dari properti itu sendiri. Misalnya, dalam membuat text-align, maka syntax yg sesuai adalah ta, kemudian td akan menghasilkan text-decoration dengan default value none.
Width & Height
Untuk menulis width dan height cukup dengan huruf w dan h dan bisa ditambahkan ukuran yang Anda inginkan.
Background
Dalam menuliskan background, huruf yang Anda butuhkan adalah bg. Anda bisa menambahkan huruf lain c untuk background-color, i untuk background-image dan r untuk background-repeat. Atau jika ingin menuliskan semuanya cukup menambahkan symbol + setelah bg.
Box Shadow
box-shadow bisa Anda tulis cukup dengan huruf bxsh dan Emmet akan melengkapi kode Anda berikut properti tambahan prefix browser beserta value defaultnya.
Colors
Jika Anda ingin merubah warna suatu teks, Anda hanya perlu menulis huruf c dan tekan tab lalu akan muncul color ditambah dengan default valuenya.
Lain-lain
Fungsi terakhir yang akan saya jelaskan adalah fungsi untuk import, font-face dan keyframes. Kesemuanya itu dimulai dengan penulisan tanda @ lalu diikuti huruf yang sesuai. Untuk import adalah i, font-face adalah ff dan keyframes adalah kf. Anda juga bisa memberikan properti dan value tambahan jika menggabungkannya dengan syntax + (berlaku hanya untuk font-face dan keyframes).
Kesimpulan
Beberapa contoh diatas hanyalah sebagian kecil fungsi Emmet untuk CSS. Masih ada banyak sekali fungsi lain yang bisa Anda lihat secara lengkap dengan Cheat Sheet Emmet disini. Sebenarnya selain HTML dan CSS, Emmet mendukung satu bahasa lagi yaitu XSL (EXtensible Stylesheet Language). Namun, kita tidak akan membahasnya lebih jauh. Selamat mencoba.