Emmet چیست و چگونه با آن راحت تر کد HTML و CSS بزنیم؟

چگونه سریعتر و راحت تر کد HTML و CSS بنویسیم؟ می خوام یک ابزار ساده در برنامه نویسی وب براتون معرفی کنم که باعث میشه وقتتون توی نوشتن کد ها کمتر تلف بشه و با این ابزار از کدنویسی خسته نشین و بیشتر لذت ببرین ، این ابزار رایگان که اسمش Emmet هست موجب میشه کد های Html و Css رو خیلی سریعتر از قبل بنویسید.به دلیل این که برای اغلب Editor های معروف ارائه شده،محبوبیت بالایی بین افراد پیدا کرده ، برای نصب Emmet در editor محبوب Brackets کافیه از قسمت extention manager با تایپ کردن emmet اون رو پیدا کنید.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
  1. سمبل های Emmet
وب سایت توسینسو

نصب این ابزار بر روی editor دیگری به نام SublimeText هم باید مراحل زیر رو طی کنین:

  1. اول باید package manager اون رو بر روی Sublime نصب کنید.برای این کار به این لینک برید و کد مربوط به ورژن Sublime نصب شده بر روی سیستمتون رو از این آدرس کپی کنید
  2. به editor برگردید و کلید های ترکیبی ` + Ctrl رو فشار بدید یا به قسمت View>Show console برید.یک فیلد در پایین برای شما باز می شه.کدی که کپی کردید رو اونجا paste کنید و enter کنید تا نصب انجام بشه.
  3. حالا Sublime رو restart کنید.به قسمت Preferences > package Control برید و Install package رو انتخاب کنید.emmet رو جستجو کنید و اون رو نصب کنید.بعد از نصب یک پیام موفقیت به شما نشون داده میشه.

(ممکنه دوباره لازم باشه برنامه رو restart کنید تا تغییرات اعمال شه) حالا برای استفاده از این ابزار فایل Html ای رو که میخواین باز کنید.استفاده از emmet بسیار راحته و فقط از یک سری سمبل استفاده می شه. برای نوشتن تگ های html کافیه اسم اوتگ رو بنویسید و بعد با فشردن Tab، براتون تگ رو باز می کنه و میبنده.(مثل a و img و h2 و h3 و h4 و p و nav)

سمبل های Emmet

1. سمبل . که برای اضافه کردن class به تگ مورد نظر هست:(اگه اسم تگ قبلش نوشته نشه به طور پیش فرض تگ div باز میشه)

.container

div.wrapper.success

header.siteHeader

نتیجه به این شکل هست:

<div class="container"></div>
<div class="wrapper success"></div>
<header class="siteHeader"></header>

2.سمبل # که برای اضافه کردن Id به تگ استفاده می شه:

#container
div#wrapper.success
header#siteHeader

که نتیجه به این شکل هست:

<div id="container"></div>
<div id="wrapper" class="sucsess"></div>
<header id="siteHeader"></header>

3.سمبل + که المان های مورد نظرتون رو زیر هم باز می کنه:

header+.main-container+footer

نتیجه به این شکل هست:

<header></header>
<div class="main-container"></div>
<footer></footer>

4. سمبل < که المان های فرزند برای المان مورد نظر ایجاد می کنه:

header>nav
header>nav>ul>li

نتیجه به این شکل هست:

<header>
    <nav></nav>
</header>

<header>
    <nav>
        <ul>
            <li></li>
        </ul>
    </nav>
</header>

5.سمبل ^ که ترکیبی از دو سمبل + و < است : مثال:

header>nav^main>article^footer

نتیجه:

<header>
    <nav></nav>
</header>
<main>
    <article></article>
</main>
<footer></footer>

مثال دوم:(به تعداد < ها از ^ استفاده میشه)

header>nav>ul^^main>article+aside^footer
<header>
    <nav>
        <ul></ul>
    </nav>
</header>
<main>
    <article></article>
    <aside></aside>
</main>
<footer></footer>

6. سمبل () برای group کردن المان ها(شبیه به مورد قبلی):

مثال:

(header>nav)(main>article)(footer)

نتیجه:

<header>
    <nav></nav>
</header>
<main>
    <article></article>
</main>
<footer></footer>

7. سمبل * برای تعداد المان ها

li*3

نتیجه:

<li></li>
<li></li>
<li></li>

مثال دیگر:

header>nav>ul>li*3>a

نتیجه:

<header>
    <nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>
</header>

8.لینک ها در emmet :

a
a:link
[""=a:link[title
["a[href="http://google.com
["a[href="http://google.com" title="visit google.com

نتیجه:

<a href=""></a>
<a href="http://"></a>
<a href="http://" title=""></a>
<a href="http://google.com"></a>
<a href="http://google.com" title="visit google.com"></a>

امیدوارم براتون مفید واقع شده باشه . موفق باشید.


علی سفیدموی
علی سفیدموی

فارغ التحصیل رشته مهندسی سخت افزار دانشگاه شاهد هستم. به حوزه شبکه علاقه مند می باشم و دوره MCSE را در مجتمع فنی تهران شعبه ابن سینا گذرانده ام. به یادگیری و کار تیمی علاقه مند می باشم. در زمینه هایی از قبیل high availability و load balancing سرور های لینوکسی در شرکت ویراتک شریف دارای تجربه می باشم. علاقه مند به انجام پروژه در زمینه شبکه های کامپیوتری هستم. در حوزه برنامه نویسی و توسعه اپلیکیشن های تحت وب فعالیت داشته و دارم. به عنوان کاربر نویسنده نیز چندین مطلب تخصصی در حوزه فناوری اطلاعات در

نظرات