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:
Yorum gönder