Artık CSS kodlarınızı daha hızlı daha kolay yazabileceksiniz. Nasıl mı? less.js ile. Hemen konuya girelim.

styles.less adlı bir dosya oluşturup bunu HTML sayfanıza çağırınız.

<link rel="stylesheet/less" type="text/css" href="styles.less">

Daha sonra http://lesscss.org adresine girip son versiyonunu indirin. HTML sayfanıza indirdiğiniz javascript dosyasını çağırınız.

<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js" type="text/javascript"></script>

Artık CSS içinde değişkenler kullanabilirsiniz. Örneğin bir rengi birden fazla kullanmanız gerekirse her seferinde renk kodunu yazmak yerine değişkene atayıp kullanabilirsiniz. Daha sonra bir değişiklik yapmak istediğinizde sadece o değişkendeki renk kodunu değiştirmeniz yeterli olacaktır.

Örnek kullanım:

// LESS
@renk = #333;

#header {
    color: @renk;
}
a {
    color: @renk;
}

// CSS çıktısı

#header {
    color: #333;
}
a {
    color: #333;
}

Bir örnek daha göstermek istiyorum. Örneğin background-image'de sürekli link yazmaktan bıktınız. Bir kere yazıp değişken şeklinde kullanabilirsiniz. Örnek:

@url: "http://www.huseyin.at/images";
background-image: url("@{url}/bg.png");

less.js kütüphanesiyle işinizi epey kolaylaştırabilirsiniz. Sorularınız olursa yorum olarak bırakınız.