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

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