معرفی Zen Coding یا Emmet Syntax - Emmet Syntax

Emmet Syntax - معرفی Zen Coding یا Emmet Syntax



صندوق پیام 0   |  پرينت   |  بازدید:48

برای من همیشه نوشتن کد های HTML با دشواری و مرارت های زیادی همراه بوده. نوشتن ساختار های تو در تو، قرار دادن id و class مناسب و باز و بسته کردن تگ ها و قرار دادن قرزند ها در داخل تگ ها حقیقتا کار هایی خسته کننده، تکراری و حوصله سر بر هستند.




برای من همیشه نوشتن کد های HTML با دشواری و مرارت های زیادی همراه بوده. نوشتن ساختار های تو در تو، قرار دادن id و class مناسب و باز و بسته کردن تگ ها و قرار دادن قرزند ها در داخل تگ ها حقیقتا کار هایی خسته کننده، تکراری و حوصله سر بر هستند.
روش Zen Coding یا Emmet Syntax برای حل همین مسئله به وجود آمده و سرعت توسعه کد های HTML را بسیار بیشتر خواهد کرد. پس از استفاده از این روش، به هیچ وجه قادر نخواهید بود که به روش سنتیِ گذشته کد های HTML بزنید.
1. مثلا با استفاده از دستور div#control.panel.panel-success و فشردن کلید tab، یک div با شناسه panel و کلاس های panel و panel-success ساخته خواهد شد.
2. با استفاده از Zen Codding به راحتی می توانیم المنت های داخلی هم در یک خط تعریف کنیم. مثلا ul>li*5 موجب خواهد شد یک ul همراه با پنج المنت li در درون اش تعریف شود.
سعی کنید حتما از روش Zen Coding استفاده کنید، چرا که سرعت توسعه شما را به شدت بالا خواهد برد.
Zen Coding پس از نصب افزونه Web Essentials در ویژوال استودیو افزوده خواهد شد. همچنین Visual Studio Code به طور پیش فرض از این روش پشتیبانی می کند.

1. جدول آموزش سریع Zen Coding
http://docs.emmet.io/cheat-sheet/
2. افزونه Web Essentials
http://vswebessentials.com/


پورتال وی وی تو - VV2.ir