#zencoding

Temel işlemler

Önce hergün kullandığım basit ifadelerden bahsederek konuya gireyim. Sublime Text 'e emmet i kurduktan sonra

img

yazıp TAB a bastığımızda bize aşağıdaki çıktıyı veriyor.

<img src="" alt="">

Emmet'in en güzel özelliği doküman hiyerarşisini düşünerek CSS seçicilerini kullanarak istediğimiz çıktıyı üretebiliyoruz.

p>a.img-link>img

şunu üretecek

<p><a href="" class="img-link"><img src="" alt=""></a></p>

Biraz daha kompleks bir örnek

ul.nav.nav-tabs>li*5>a.nav-link

ifadesinin çıktısı

<ul class="nav nav-tabs"> <li><a href="" class="nav-link"></a></li> <li><a href="" class="nav-link"></a></li> <li><a href="" class="nav-link"></a></li> <li><a href="" class="nav-link"></a></li> <li><a href="" class="nav-link"></a></li> </ul>

Lorem ipsum dolor sit amet

Emmet'i saçma metin üretgeci olarak da kullanabiliyoruz.

p*3>lorem

ifadesi 3 paragraf lorem ipsum üretecektir.

<p>Lorem ipsum dolor sit amet, ... quidem sequi.</p> <p>Saepe consectetur ... doloremque qui! Similique.</p> <p>Consequuntur error voluptates, ... qui placeat.</p>

Ayrıca istediğimiz uzunlukta lorem ipsum üretebilmek için sonuna kelime sayısını ekleyebiliyoruz.

lorem200

ifadesinin çıktısı

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur laudantium, suscipit magnam non, delectus velit dolore blanditiis. Sequi ex sed, rem optio natus, eum. Dolore sed earum perferendis fuga alias voluptatibus, perspiciatis quos natus facere quibusdam quis in, iure ullam, molestias quo illo aliquid ab aspernatur tempore ipsam ratione blanditiis. In maxime exercitationem praesentium vel sunt voluptatum suscipit esse nihil quam nemo. Quia totam odio enim amet quaerat consequuntur ex nam tenetur magnam minima delectus, deserunt fugit ea eum. Molestiae pariatur ab, quibusdam eaque sunt voluptates dolorem vero. Velit a officiis hic error numquam unde distinctio quidem doloribus iste sapiente libero inventore, eos, id at vel obcaecati. Modi harum consectetur minima deserunt, a, sapiente magnam beatae blanditiis ex repellat saepe quibusdam atque repudiandae aspernatur similique, quia veniam natus fugiat animi. Inventore molestias animi alias delectus iure numquam dolor blanditiis quod quae ullam laborum rem architecto ab quia quis ratione, consequuntur quasi, ad aliquam culpa nostrum voluptas eligendi quaerat dolores maiores! Sequi quasi magnam necessitatibus hic qui possimus quisquam, incidunt obcaecati, ex ad error officia expedita nihil animi. Vel facere accusantium quae libero voluptatem praesentium aut neque ipsa optio, aliquid similique, repudiandae excepturi quia repellat accusamus at. Aspernatur iste quibusdam pariatur!

Tabi bunu bir önceki örnekle kombine de edebiliyoruz.

p*5>lorem150

gibi....

inline hesap makinası

CSS yazarken EM hesabını yapmak için kullanabileceğiniz güzel bir özlellik.

margin-bottom: 24/16

yazıp Ctrl+Shift+Y tuş kombinasyonu ile işlemin sonucunu 1.5 olarak görebiliyoruz.

Kapanış etiketine atla

Kompleks bir HTML dokümanında bir kapsayıcı elementin kapanış etiketine bulmak her zaman kolay olmayabiliyor. Etiketin başladığı yere tıklayıp Ctrl+Alt+J tuş kombinasyonuyla kapanış kısmına zıplayabiliyoruz.

Yardımcı kod yorumları

İç içe çok elementi bir çırpıda eklediğimizde ya da dokuman büyüdükçe kapsayıcı bir elementin nerede bittiğini bulmak bazen sorun olabiliyor. Bu durumlarda yorumlar ile elementin bitişini belirtmek işleri çok kolaylaştırıyor. Emmet'in kod yorumu özelliği ile bu işi otomatie etmek oldukça keyifli.

.container>ul>li*5>a|c

Bu ifadeyi yazıp TAB'a bastığımızda şunu veriyor bize;

<div class="container"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <!-- /.container -->

İfadenin sonuna |c yazmak üretilen sonucun yorum içermesini sağlıyor.

 Varsa paylaşmak istediğiniz güzellikler oyrumlarınızı bekliyorum :)

Cheers