LESS ile daha az CSS

LESS tarafından geliştirilmiş olan 46kb boyutlu less.js dosyası. Stil dosyalarınızı bayağı hafifletici bir etkiye sahip. Örneğin aynı renk kodu temanızın stil dosyasında 20 kere geçiyorsa bu sayıyı 1’e indirmek mümkün. Böylece sadece belirlediğiniz değişkenin renk değeriyle oynanarak 20 yeri birden düzenlemiş olacak.

LESS ile derlenmeden CSS kodlarımız aşağıdaki gibi 10px ve 5px değerinde kenarları yuvarlattık.

#header {
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

Bakalım nasıl LESS ile işlem yapılıyor?

.radius (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.radius;
}
#footer {
.radius(10px);
}

Kaynaklar

http://lesscss.org/
http://lessframework.com/
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-…
http://twitter.github.com/bootstrap/less.html