سلام
امروز می‌خوام یه ابزارو معرفی کنم که حتما بعضی‌ها می‌شناسنش و باهاش کار می کنن و مطمئنن بعد از یه مدت کار با اون می فهمن که بدون اون کار کردن سخت میشه. اون ابزار چیزی نیست جز Emmet یا Zen Coding. این دو تا اسم جفتشون یکیه و فکر کنم الان اسم رسمیش همون Emmetه.
خب بیایید ببینیم این ابزار به چه دردی میخوره؟ تو یه جمله باید بگم که نوشتن کد Html, CSS, Xsl رو خیلی آسون می کنه. بزارید با یه مثال توضیحش بدم. فرض کنیم ما میخواهیم یه جدول بسازیم با ۵ تا ردیف و ۵ تا ستون. خب حجم کد نسبتن بالایی داره:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> |
خب حالا با zen coding تو سه سوت کد بالا رو می‌نویسیم، اینطوری:
|
1 |
table>tr*5>td*5 |
بعدش دکمه Tab رو می زنیم و به صورت خودکار کد بالا تولید میشه. پس همونطور که متوجه شدید، Emmet کارش تسریع کار و خلاصه‌نویسی کد هستش.
حالا بیایین یه چند تا مثال دیگه بزنیم:
|
1 |
h$[title=item$]{Header $}*3 |
که خروجیش میشه:
|
1 2 3 |
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> |
مثال زیر فکر می کنم بهترین و قشنگ‌ترین مثال Emmetعه. فرض کنیم می‌خواهید یه صفحه HTML از صفر درست کنید. خب نیاز دارید تا یه سری تگ مثل نوع سند و یا متاتگ‌ها را تعریف کنید ولی با Emmet اینطوری عمل می‌کنیم:
|
1 |
! |
بله، فقط ! و بعدش Tab رو می‌زنیم، اینم خروجیش:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
خب تا اینجا مثال‌هایی از HTML زدیم، حالا می‌خوام چند تا مثالم از کاربردش توی CSS بزنم:
فرض کنیم می خواهیم یک وب‌فونت جدید با فرمت‌های مختلف به فایل CSSمون اضافه کنیم:
|
1 |
@f+ |
که خروجیش میشه این:
|
1 2 3 4 5 6 7 8 9 10 |
@font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; } |
خب فکر می‌کنم تا همینجا بسه، چون مثال‌های بسیار زیاد و پایان‌ناپیذیری میشه زد که نه تو حوصله منه و نه حوصله شما خواننده گرامی.
خب حالا می خواهید بدونید که از کجا این ابزارو دانلود کنیدو چه‌جوری نصبش کنید. خب این ابزار به صورت یک پلاگین برای IDE های مختلف موجوده و تقریبا طرز نصبش توی هر IDE فرق می‌کنه ولی اگر برای IDE که دارید استفاده می‌کنید تا حالا پلاگین نصب کردید، باید بدونید که اینم مثل بقیه‌ست.
بعضی جاها اسمش Emmet و بعضی جاها Zen Coning عه.