آشنایی با Emmet

image post

آشنایی با Emmet

در زمان کد نویسی html زمان زیادی صرف نوشتن تگ های تکراری میشود , emmet به ما کمک میکند بدون صرف وقت , کد های تکراری را بصورت آسان تری بنویسیم !

emmet اکنون بر روی بسیازی از ide های هوشمند از جمله ADW و PHPstorm و .. نصب می باشد , همینطور میتوانید از emmet در editor هایی همچون sublime text و ... استفاده کنید !

فرض کنید قرار است کد زیر را بنویسید :

<div class="row">
	<div class="col-md-6"></div>
	<div class="col-md-6"></div>
</div>

حالا همین کد را با emmet مینویسیم !

div.row>div.col-md-6*2

عبارت بالا را در ide خود نوشته و tab را فشار دهید تا کد مورد نظر توسط emmet ساخته شود !

به همین آسانی !

آموزش کار با emmet :

برای صاخت tag های html با emmet کافی است نام تگ را بنویسید و کلید tab را فشار دهید :

div

سپس کلید tab را میزنیم تا نتیجه بصورت زیر در بیاید :

<div>
</div>

فرض کنید قرار است 3 div ایجاد کنید بطوری که هر یک فرزند دیگری باشد :

div>div>div

سپس کلید tab را میزنیم تا نتیجه بصورت زیر در بیاید :

<div>
	<div>
		<div></div>
	</div>
</div>

فرض کنید میخواهید div یی با مشخصات زیر بسازید

<div class="classy1 classy2" id="bakhshi"></div>

برای ساخت تگ بالا با emmet ابتدا اسم تگ را نوشته سپس class ها را با نقطه مشخص میکنیم و در نهایت id را با علامت # مشخص می نماییم !

div.classy1.classy2#peter

در مورد بعدی میخواهیم سه تگ Div را در کنار هم ایجاد نماییم :

<div></div>
<div></div>
<div></div>

برای ساخت مورد بالا تگ هارا با + از هم جدا میکنیم !

div+div+div

در مورد بعدی میخواهیم یک ul با 5 تگ li در درونش ایجاد نماییم

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

برای اینکار باید با علامت > مشخص کنیم li فرزند ul است و با علامت * تگ li را ضرب در تعداد مورد نظر می نماییم :

ul>li*5

موفق باشید .

دنیس ریچی : یونیکس بسیار ساده هست، تنها یک نابغه باید باشید تا بتوانید سادگی آن را درک کنید.