×

Emmet Software Nedir?

Emmet Software

Emmet Software Nedir?

Emmet (eski adıyla Zen Coding), içerik yardımı aracılığıyla HTML , XML , XSLT ve diğer yapılandırılmış kod biçimlerinde yüksek hızlı kodlama ve düzenlemeye izin veren, metin editörleri için bir dizi eklentidir.

child: >

child sözdizimi ile yazmak istediğimiz komutu belirtip, kod bloğumuzun içerisine yazmak istediğimiz diğer öğleri belirtiriz:

 nav>ul>li

kodun çıktısı bize bu sonucu verecektir:

<nav>

<ul>

<li></li>

</ul>

</nav>

Sibling: +

eğer bir div, paragraf ve img dosyası oluşturmak istiyorsak el ile uzunca yazmak yerine ; emmet sibling sözdizimi’nden faydalanarak kolayca gerçekleştirebiliriz.

div+p+img

kodun çıktısı aşağıdaki gibi görünecektir:

    <div></div>
    <p></p>
    <img src="img.jpg" alt="altf4">

eğer bir div içinde p etiketi ve img dosyası oluşturmak istiyorsak:

div>p+img

kodun çıktısı aşağıdaki gibi olacaktır:

<div>
     <p></p>
        <img src="" alt="">
  </div>

Climb-up: ^

^ operatörü ile oluşturduğumuz kod bloğunun dışına çıkabilir ve bağımlılık durumundan kurtulabiliriz, örneğin:

div+div>p>span+em 

kodunun çıktısı aşağıdaki gibi olacaktır:

  <div></div>
    <div>
        <p><span></span><em></em></p>
    </div>

<p> etiketinin dışında kod yazmaya devam etmek istiyor isek climb-up “^” etiketinden yararlanmamız gerekir, yani:

 div+div>p>span+em^bq

kodun çıktısı aşağıdaki gibi olacaktır:

 <div></div>
    <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
    </div>

Grouping: ()

Grouping , karmaşık kısaltmalarda alt dalları düzenlemek için kullanılır, örneğin:

div>(header>ul>li*2>a)+footer>p

kodun çıktısı aşağıdaki gibi olacaktır:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

burada bir div oluşturup içerisinde header bloğuna ul , li , a etiketleri yazdık, sonrasında ise header etiketinden çıkarak yani () parantezlerin dışına çıkarak bir footer etiketi oluşturup içerisine paragraf etiketi yerleştirdik.

Multiplication: *

Multiplication ile yazacağımız etiketin kaç kez çıktı vermesi gerektiğini tanımlayabiliriz, örneğin:

ul>li*5

Burada bir liste oluşturup içerisine 5 adet eleman geleceğini belirtmiş olduk.

Kodun çıktısı aşağıdaki gibi olacaktır:

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

Share this content:

cropped-download20221206050100 Emmet Software Nedir?
Bahar

Full-Stack Developer AltF4Yapın Sitesi Editörü AltF4Yapın Kurucu Üyesi

Yorum gönder