ایمِت، موتورِ توربویِ فرانت‌اند (قسمت ۱)

احتمالاً خیلی از برنامه‌نویس‌های وب، مخصوصاً فرانت‌اند دوِلُپرها، اسم ایمِت (Emmet) رو شنیده باشن. ایمت ابزاری کاربردی برای سریع‌تر نوشتن زبان‌های نشانه‌گذاریه. هرچند از ایمت بیشتر در HTML و CSS استفاده می‌شه، اما خب در XML و XSL هم کاربرد داره.

شاید سوال کنید چطوری با ایمت می‌شه سریع‌تر نوشت؟ توی قسمت اولِ این مطلبِ چند دقیقه‌ای، سعی می‌کنم از خوبی‌ها و ویژگی‌های ایمت در HTML براتون بگم. در قسمت دوم هم ایمت رو توی CSS بررسی می‌کنیم. اما از سرچ کردن توی گوگل و هم‌چنین مستند‌های خودِ سایت ایمت هم غافل نشید.

از همون اولِ کدنویسی ازش استفاده کنید

همه ما وقتی می‌خوایم یه پروژه فرانت‌اند رو شروع کنیم می‌گیم: «اووف، دوباره تگ‌های html و head و body و ... خدایا بسه دیگه، خسته شدیم.»

یکی از خوبی‌هایی که ایمت داره اینه که دیگه لازم نیست اون تگ‌های اصلی HTML رو هربار توی هر پروژه از اول بنویسید. کافیه توی محیطی که درحال کدنویسی هستیم یه علامت تعجب ( ! ) تایپ کنیم و دکمه تب رو بزنیم. بوم...

خوبه دیگه؟ ساده‌ترین دستورِ ایمت به نظرم همینه. این نکته رو هم در نظر داشته باشید که بعد از هر دستورِ ایمت باید TAB بزنید.

ایمت در HTML

حالا یکم مفصل‌تر کاراییِ ایمت در HTML رو بررسی می‌کنیم. داستان از این قراره که وقتی می‌خواید به کمک ایمت سریع‌تر کد بزنید، باید با selector های CSS آشنا باشید. دقیقاً همون‌طور که توی CSS برای استایل دادن به یک تگِ خاص با selector های مختلف به اون تگ می‌رسید.

مثلاً برای این که یه تگ p رو داخل یه div قرار بدید کافیه از child selector استفاده کنید. یا برای این که دو تا تگ رو کنار هم قرار بدیم طبیعتاً باید از sibling selector استفاده کنیم. از نقطه ( . ) و شارپ ( # ) هم که بهتر از من می‌دونید، به ترتیب برای نوشتن ‌class و id استفاده می‌شه. به کد زیر توجه کنید:

<!--     div>p     -->
<div>
    <p></p>
</div>

<!--     div+p     -->
<div></div>
<p></p>

<!--     .test     -->
<div class="test"></div>

<!--     #menu     -->
<div id="menu"></div>

توجه کنید که وقتی از نقطه و شارپ استفاده می‌کنید، ایمت به صورت پیش‌فرض کلاس و آیدی مورد نظر رو به یک تگ div نسبت می‌ده. برای این که به تگ دیگه‌ای بتونید کلاس یا آیدی بدید باید قبل از نقطه اسم اون تگ رو بنویسید.

<!--    ul.menu    -->
<ul class="menu"></ul>

برای تکرار کردن تگ‌ها از علامت * استفاده می‌شود و برای نوشتن متن در داخل یک تگ، کافیه متن مورد نظر رو بعد از اسم تگ، در داخل { } قرار بدیم.

استفاده از پرانتز‌ها رو هم فراموش نکنید. برای اینکه اولویت‌بندی تگ‌ها رو بتونید رعایت کنید از پرانتز‌ها کمک بگیرید.

<!--     .parent>(ul.menu>li{$}*5)+h5{sample text}     -->
<div class="parent">
        <ul class="menu">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <h5>sample text</h5>
</div>

همون‌طور که در بالا می‌بینید، بعد از لیست آیتم‌ها در داخل کروشه علامت $ قرار گرفته ( {$}li ) که برای نوشتن و تکرار عدد از اون استفاده میشه و به تعدادی که از تگ li تکرار شده، داخلش عدد قرار گرفته. برای این که بهتر متوجه بشید به کد زیر دقت کنید:

 <!--     (div{item$})*3    -->
<div>item1</div>
<div>item2</div>
<div>item3</div>

در مثال بالا، به جای علامت $، عدد قرار گرفته و به تعداد دفعاتی که تگ div تکرار شده به این عدد اضافه شده.

نوشتن Attribute های تگ‌ها به کمک ایمت

خب حتما تا اینجا که رسیدیم با خودتون می‌گید چقدر بده که نمیشه attribute های html رو با ایمت نوشت! اما میشه. به کمک ایمت حتی می‌تونید attribute ها رو هم بنویسید. برای نوشتن attribute های هر تگ، کافیه اون ویژگی رو داخل [ ] قرار بدید.

<!--     img[src=./images/my-sample-image.jpg]     -->
<img src="./images/my-sample-image.jpg" />

به این نکته توجه کنید: وقتی از ایمت برای نوشتن description های مربوط به یک attribute استفاده می‌کنید، لازم نیست که اون description رو داخل " " یا همون دابل کوتیشن قرار بدید، چون ایمت خودش این کار رو براتون انجام می‌ده.

برای نوشتن چندین attribute هم کافیه اون‌ها رو به ترتیب و جدا جدا داخل [ ] قرار دهید.

اما نکته جالب اینه که ایمت برای نوشتن یک سری از attribute ها کار شما رو راحت کرده. به بخش بعد توجه کنید تا سورپرایز شید :)

ایمت و تگ پرکاربردِ input

همه‌ ما فرانت‌اند‌ها تقریبا توی هر پروژه‌ای از فرم‌ها و تگ‌های input زیاد استفاده می‌کنیم و همیشه باید برای input های مختلف، type یا همون نوع مختلفی در نظر بگیریم. خب همونطور که بالاتر گفتیم، می‌تونید attribute ها رو به کمک ایمت بنویسید. اما به نظرتون این کار برای input ها یکم وقت‌گیر نیست؟ ایمت برای این هم راه حل در نظر گرفته.

برای اینکه نوع (type) یک ‌input رو تعیین کنید کافیه که بنویسید input و نوع مورد نظر خودتون رو بعد از دو نقطه ( : ) بنویسید.

<!--     input:number    -->
<input type="number" name="" id=""/>

<!--     input:email    -->
<input type="email" name="" id=""/>

خب می‌بینید که خود ایمت براتون attribute های name و id رو هم قرار میده. دیگه چی بهتر از این؟ اگر هم بعد از نوشتن input هیچ چیزی قرار ندید، ایمت به صورت پیش‌فرض براتون نوع اون رو text قرار می‌ده.

از ایمت در CSS غافل نشید

توی این قسمت سعی کردم برخی قابلیت‌های ایمت توی html رو بهتون معرفی کنم و امیدوارم که تا اینجای کار از ایمت لذت برده باشید. اما یادتون نره که این‌ها همه ویژگی‌های ایمت نیست و کلی قابلیت دیگه بهتون میده توی html که می‌تونید با خوندن مستند‌های سایت رسمی ایمت، ازشون استفاده کنید.

در قسمت دوم این مطلب هم قراره براتون از ایمت توی CSS بگم که خیلی خیلی جذاب‌تر از ایمت در html هست و حسابی توی تندنویسی بهتون کمک می‌کنه.

نظرات و پیشنهادات‌تون رو هم دریغ نکنید.

دست به کد باشید.