دستورات مقدماتی emmet

در این مقاله چند مورد از دستورات پر مصرف emmet برای HTML و CSS را بررسی می کنیم.

برای ایجاد تگ های HTML کافی است نام تگ را به تنهایی نوشته وکلید TAB را فشار دهیم:

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

ایجاد تگ ها به صورت تودرتو:

ul>li>ul>li =

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

ایجاد چند تگ به صورت پشت سر هم:

div+p+a+nav+header =

<div></div>
<p></p>
<a href=""></a>
<nav></nav>
<header></header>

ایجاد تگ های دارای کلاس و آی دی:

nav.navigationbar = 
<nav class="navigationbar"></nav>

section#slider = 
<section id="slider"></section>

article.card.bg-dark.d-flex = 
<article class="card bg-dark d-flex"></article>

ایجاد محتوا درون تگ ها با استفاده از علامت های { } :

ul>li*5{Item} = 

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

ایجاد ترتیب با شماره گذاری توسط علامت $ :

ul>li*5{Item $} = 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

ul>li*5{Item $$} = 

<ul>
    <li>Item 01</li>
    <li>Item 02</li>
    <li>Item 03</li>
    <li>Item 04</li>
    <li>Item 05</li>
</ul>

ul>li*5>a{item $$@2} = 

<ul>
    <li><a href="">item 02</a></li>
    <li><a href="">item 03</a></li>
    <li><a href="">item 04</a></li>
    <li><a href="">item 05</a></li>
    <li><a href="">item 06</a></li>
</ul>

ایجاد attribute ها:

ul>li*4>a[href="www.link$.net" target="_blank"]{link $} = 

<ul>
    <li><a href="www.link1.net" target="_blank">link 1</a></li>
    <li><a href="www.link2.net" target="_blank">link 2</a></li>
    <li><a href="www.link3.net" target="_blank">link 3</a></li>
    <li><a href="www.link4.net" target="_blank">link 4</a></li>
</ul>

input:email[disabled] = 

<input type="email" name="" id="" disabled="disabled">

برای ایجاد کد های css فقط کافی است propertie ها را به صورت مخفف شده بنویسیم و کلید TAB را بشاریم:

bgc = background-color:
bgi = background-image: url();
m5-auto = margin: 5px auto;
mw1440 = min-width: 1440px;
w100p = width: 100%;
fz = font-size: ;
td = text-decoration: ;
ff = font-family: ;
.
.
.

امیدوارم مفید بوده باشد ?