LESS – Dinamik Stil (CSS) Dili

Twitter Bootstrap‘i (ayrı bir konuda buna da değinmek gerekir) incelerken LESS ile karşılaştım. Bootstrap, LESS ile tamamen entegre şekilde çalışıyormuş ve gayet de iyi yapıyormuş 🙂 Hemen derinlemesine LESS nedir ne işe yarar diye araştırmaya koyuldum ve sizlere de bahsetmek istedim.

LESS, CSS‘i dinamik hale getiren bir programlama dili. CSS yazarken dert yandığım değişken ve fonksiyon tanımlama işlevlerini CSS‘te kullanılır hale getiriyor. Aslında CSS‘te kullanılır hale getiriyor çok doğru olmadı, siz LESS yazıyorsunuz ve LESS derleyicisi onu CSS‘e çeviriyor. Gerçekten çok hoşuma gitti.

LESS‘in sitesinden bir örnekle sizi baş başa bırakayım. Detaylarına sitesinden bakabilirsiniz.

Öncelikle LESS kodu:

// LESS kodu
@color: #4D926F;
#header { color: @color; }
h2 { color: @color; }

LESS kodunu derleyince oluşan CSS kodu:

/* Derlenmiş CSS */ 
#header { color: #4D926F; }
h2 { color: #4D926F; }

Bir de fonksiyonumsu ile ilgili bir örnek alıntılayalım. Önce LESS kodu:

// LESS kodu
.rounded-corners (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}
#header { 
 .rounded-corners;
}
#footer {
 .rounded-corners(10px); 
}

Derlenmiş CSS kodu:

/* Derlenmiş CSS */
#header {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
#footer {
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

Derleme konusu yine sitesinde mevcut. Javascript ile de derlenebiliyor ancak ben beceremedim. Windows için çok kullanışlı bir program buldum; SimpLESS. Kullanımı çok basit. Sadece LESS dosyanızı programa ekliyorsunuz. Kendisi arka planda çalışıyor ve dosyayı gözlemliyor. Dosyada değişiklik olduğu zaman otomatikman CSS dosyasına derliyor. Çok kullanışlı.

8 Comments

    LESS – Dinamik Stil (CSS) Dili | Kara Kule

    […] ve gayet de iyi yapıyormuş Hemen derinlemesine LESS nedir ne işe yara… Devamı için : LESS – Dinamik Stil (CSS) Dili Share this:TwitterFacebookLike this:BeğenBe the first to like this. By ahmet orsorlu • […]

    LESS – Dinamik Stil (CSS) Dili « Lé Blog

    […] ve gayet de iyi yapıyormuş Hemen derinlemesine LESS nedir ne işe yara… Devamı için : LESS – Dinamik Stil (CSS) Dili Share :FacebookTwitterStumbleUponLinkedInLike this:LikeBe the first to like […]

    LESS – Dinamik Stil (CSS) Dili | Gökhan Tunçkale | Blog

    […] ve gayet de iyi yapıyormuş Hemen derinlemesine LESS nedir ne işe yara… Devamı için : LESS – Dinamik Stil (CSS) Dili ShareFacebookTwitterStumbleUponMoreTumblrRedditLinkedInDiggEmailPrintLike this:BeğenBe the first […]

    LESS – Dinamik Stil (CSS) Dili | Boğaç Aslanyürek

    […] ve gayet de iyi yapıyormuş Hemen derinlemesine LESS nedir ne işe yara… Devamı için : LESS – Dinamik Stil (CSS) Dili This entry was posted in Professional and tagged CSS, CSS değişken, CSS fonksiyon, Dinamik […]

    LESS – Dinamik Stil (CSS) Dili « Musa Usta'nın Yeri

    […] ve gayet de iyi yapıyormuş Hemen derinlemesine LESS nedir ne işe yara… Devamı için : LESS – Dinamik Stil (CSS) Dili Share this:TwitterFacebookLike this:BeğenBe the first to like this.   Leave a […]

    Sadık

    Merhaba les kodlarını html de nereye yazacağız?
    Yada css gibi harici dosyadamı kaydediliyor.
    Mesela gradient renk geçişleri ile basit bir örnekle
    aydınlatırmısınız.

      Emre Macit

      Less sadece Css oluşturabilmek için çalışma ortamınızı kolaylaştıran bir araç. Aslında size işiniz bitince bir css dosyası çıktı veriyor. Yani bahsettiğiniz gibi css gibi bir harici dosya olarak kaydedip, htmlinizde bu Css i çağıracaksınız.

      Gradient geçişleri ile ilgili ise de Ahmet Orsorlu belki daha detaylı yardımcı olabilir.

    Emre Macit

    http://www.w3resource.com/twitter-bootstrap/tutorial.php linkinde de faydalı bir anlatım var bootstrap ve less ile ilgili.

LESS – Dinamik Stil (CSS) Dili « Musa Usta'nın Yeri için bir cevap yazın Cevabı iptal et