Sublime Text 3 ile Emmet (a.k.a ZenCoding) cambazlıkları
Özellikle front-end çalışmalarda web geliştiricilerin işini inanılmaz kolaylaştıran Emmet'in standart kullanımı bile oldukça tatmin edici. Bir de işin incelikleri var tabi...
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
Kaynak: http://www.jordanm.co.uk/post/91335536701/emmets-hidden-power-features
