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ı. Devamı için : LESS - Dinamik Stil (CSS) Dili