LESS: Dinamik stil dili

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;
}

» devamı