Web Tasarım
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