طراح یا برنامه نویس وب سایت هستید؟ سال ها تگ های HTML را با هم ترکیب و ایده های خود را اجرا کرده اید؟ بدون شک یکی از آرزوهای شما در زمینه کدنویسی، حذف دستورات و تگ های تکراری و تولید خودکار آن ها با استانداردهای روز است.

ایمت (Emmet) که در گذشته آن را با نام زن کدینگ (Zen Coding) می شناختیم، یکی از بهترین پلاگین ها برای تولید سریع کدهای HTML است. در صورتیکه با ساختار دستورات HTML و CSS آشنا باشید، می توانید از ایمت به عنوان دستیار شخصی در تولید آن ها استفاده کنید.

نحوه استفاده

روش کار ایمت هیچ شباهتی با ویرایشگرها ندارد. ایمت برای هر تگ یا دستور سی اس اس حروف اختصاری تعریف کرده که با وارد کردن این حروف تگ ها یا دستورات مربوطه تولید می شوند. در بسیاری موارد ایمت هوشمندانه به بررسی موقعیت مکان نما پرداخته و دستورات متناسب با آن تولید می کند.

به ادامه مطلب بروید..

تگ های پیش نیاز HTML

با استفاده از ایمت در کمتر از ۱ ثانیه می توانید تگ های اولیه HTML را داشته باشید. کافی است یکی از عبارات ! یا html:5 را تایپ و کلید Tab را بزنید.

initializers.gif.pagespeed.ce.CgE9JL7MUZ

 

html:5 برای HTML5
html:xt برای XHTML transitional
html:4s برای HTML4 strict

کلاس، آی دی، خصوصیت و متن داخل تگ ها

به خاطر شباهت زیاد اختصارات ایمت با دستورات سی اس اس، استفاده از آن بسیار راحت است. به عنوان مثال p#foo تبدیل به یک تگ p با آی دی foo خواهد شد.

classes-ids.gif.pagespeed.ce.W1a7R6T-8U

می توانیم کلاس و آی دی را ترکیب کنیم. ورودی p.bar#foo تبدیل به کدهای زیر خواهد شد:

<p class="bar" id="foo"></p>

همچنین می توانیم همزمان با تولید تگ، محتویات داخل آن را نیز تعریف کنیم. دستور h1{foo} خروجی زیر را خواهد داشت:

<h1>foo</h1>

همزمان با تگ می توانیم خصوصیات (Attributes) آن را نیز تولید کنیم. عبارت اختصاری a[href=#] به کد زیر تبدیل می شود:

<a href="#"></a>

تگ های متوالی

با استفاده از ایمت می توانید تمام تگ های صفحه را در یک خط تولید کنید. برای ترکیب تگ ها با هم عبارات خاصی تعریف شده اند که شباهت زیادی به دستورات سی اس اس دارند.

برای قرار دادن یک تگ داخل تگی دیگر (child) می توانید از کاراکتر >، برای قرار دادن یک تگ بعد از تگ دیگر از کاراکتر + و برای خارج شدن از یک تگ (parent) از کاراکتر ^ استفاده کنید.

nesting.gif.pagespeed.ce.V197KL6yXY

گروه بندی تگ ها

همانطور که در برنامه نویسی و محاسبات ریاضی اتفاق می افتد، بسیاری مواقع نیاز داریم تگ ها را گروه بندی کنیم. عبارت (.foo>h1)+(.bar>h2) کدهای زیر را تولید خواهد کرد:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

grouping.gif.pagespeed.ce.tsvCHQ_xw2

تگ های هوشمند

به صورت مستقل زمانیکه از عبارت .item استفاده می کنیم، ایمت آن را به یک تگ div با کلاس item تبدیل می کند. اما اگر این عبارت را داخل تگ های دیگر قرار دهیم، با توجه به نوع تگ، ممکن است به جای تگ div تگ های دیگری تولید شوند. به عنوان مثال اگر .item را داخل تگ ul قرار دهیم، کد زیر تولید خواهد شد:

<li class="item"></li>

implicit-tags.gif.pagespeed.ce.cvzMMd8Crg

تکرار تگ

در ایمت می توانیم تعداد تکرار تگ را مشخص کنیم. عبارت ul>li*3 خروجی زیر را به دنبال خواهد داشت:

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

multiplication.gif.pagespeed.ce.GIDn9aLQSx

در زمان ترکیب خصوصیات و به منظور شماره گذاری آن ها کاراکتر $ تعریف شده است. خروجی عبارت ul>li.item$*3 کدهای زیر خواهد بود:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

numbering.gif.pagespeed.ce.nnPmTbsDlF

ایمت و سی اس اس

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

 

values.gif.pagespeed.ce.X-DkOgYHM7

ورودی: w100

خروجی:

width: 100px;

ورودی: h10p+m5e

خروجی:

height: 10%;
margin: 5em;

ورودی: @f

خروجی:

@font-face {
  font-family:;
  src:url();
}

ورودی: @f+

خروجی:

@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;
}

extra.gif.pagespeed.ce.GgmZPRf4F-

ورودی: lg(left, #fff 50%, #000)

خروجی:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

gradient.gif.pagespeed.ce.ELDtI0AWdL

این ها تنها گوشه ای از امکانات ایمت بود. نکته خوب درباره ایمت، توانایی شخصی سازی کدهای تولیدی است. بنابراین می توانید به سلیقه خود، خروجی را کنترل کنید. برای دریافت آخرین نسخه می توانید به وب سایت ایمت مراجعه کنید. ایمت را هم می توانید به صورت مستقل با استفاده از تگ textarea و هم به صورت پلاگین برای بسیاری از ویرایشگرها دانلود نمایید.

منبع: نردبان

3030 بازدید

۲۱ اردیبهشت ۱۳۹۲ / آموزش

۲ دیدگاه برای این مطلب ارسال شده است !

  • ارسال پاسخ !

    بالا